I have added the CORS in header but I am still getting the CORS issue in my request. What is the correct way to add and handle CORS and other requests in the headers?
Here is service file code:
import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
const httpOptions = {
headers: new HttpHeaders({
'Access-Control-Allow-Origin':'*',
'Authorization':'authkey',
'userid':'1'
})
};
public baseurl = 'http://localhost/XXXXXX';
userAPI(data): Observable<any> {
return this.http.post(this.baseurl, data, httpOptions)
.pipe(
tap((result) => console.log('result-->',result)),
catchError(this.handleError('error', []))
);
}
Error:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access
failed: Http failure response for (unknown url): 0 Unknown Error
In my server-side code, I've added CORS in the index file.
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
The following worked for me after hours of trying
$http.post("http://localhost:8080/yourresource", parameter, {headers:
{'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } }).
However following code did not work, I am unclear as to why, hopefully someone can improve this answer.
$http({ method: 'POST', url: "http://localhost:8080/yourresource",
parameter,
headers: {'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST'}
})
You can also try the fetch function and the no-cors mode. I sometimes find it easier to configure it than Angular's built-in http module. You can right-click requests in the Chrome Dev tools network tab and copy them in the fetch syntax, which is great.
import { from } from 'rxjs';
// ...
result = from( // wrap the fetch in a from if you need an rxjs Observable
fetch(
this.baseurl,
{
body: JSON.stringify(data)
headers: {
'Content-Type': 'application/json',
},
method: 'POST',
mode: 'no-cors'
}
)
);
please import requestoptions from angular cors
import {RequestOptions, Request, Headers } from '@angular/http';
and add request options in your code like given below
let requestOptions = new RequestOptions({ headers:null, withCredentials:
true });
send request option in your api request
code snippet below-
let requestOptions = new RequestOptions({ headers:null,
withCredentials: true });
return this.http.get(this.config.baseUrl +
this.config.getDropDownListForProject, requestOptions)
.map(res =>
{
if(res != null)
{
return res.json();
//return true;
}
})
.catch(this.handleError);
}
and add CORS in your backend PHP code where all api request will land first.
try this and let me know if it is working or not i had a same issue i was adding CORS from angular5 that was not working then i added CORS to backend and it worked for me
In my experience the plugins worked with HTTP but not with the latest httpClient. Also, configuring the CORS response headers on the server wasn't really an option. So, I created a proxy.conf.json file to act as a proxy server.
Read more about this here.
proxy.conf.json file:
{
"/posts": {
"target": "https://example.com",
"secure": true,
"pathRewrite": {
"^/posts": ""
},
"changeOrigin": true
}
}
I placed the proxy.conf.json file right next the the package.json file in the same directory.
Then I modified the start command in the package.json file:
"start": "ng serve --proxy-config proxy.conf.json"
The HTTP call from my app component:
return this._http.get('/posts/pictures?method=GetPictures')
.subscribe((returnedStuff) => {
console.log(returnedStuff);
});
Lastly to run my app, I'd have to use npm start or ng serve --proxy-config proxy.conf.json
Make the header looks like this for HttpClient in NG5:
let httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'apikey': this.apikey,
'appkey': this.appkey,
}),
params: new HttpParams().set('program_id', this.program_id)
};
You will be able to make api call with your localhost url, it works for me ..
If you are like me and you are using a local SMS Gateway server and you make a GET request to an IP like 192.168.0.xx you will get for sure CORS error.
Unfortunately I could not find an Angular solution, but with the help of a previous replay I got my solution and I am posting an updated version for Angular 7 8 9
import {from} from 'rxjs';
getData(): Observable<any> {
return from(
fetch(
'http://xxxxx', // the url you are trying to access
{
headers: {
'Content-Type': 'application/json',
},
method: 'GET', // GET, POST, PUT, DELETE
mode: 'no-cors' // the most important option
}
));
}
Just .subscribe like the usual.
A POST with httpClient in Angular 6 was also doing an OPTIONS request:
Headers General:
Request URL:https://hp-probook/perl-bin/muziek.pl/=/postData Request Method:OPTIONS Status Code:200 OK Remote Address:127.0.0.1:443 Referrer Policy:no-referrer-when-downgrade
My Perl REST server implements the OPTIONS request with return code 200.
The next POST request Header:
Accept:*/* Accept-Encoding:gzip, deflate, br Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4 Access-Control-Request-Headers:content-type Access-Control-Request-Method:POST Connection:keep-alive Host:hp-probook Origin:http://localhost:4200 Referer:http://localhost:4200/ User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.109 Safari/537.36
Notice Access-Control-Request-Headers:content-type.
So, my backend perl script uses the following headers:
-"Access-Control-Allow-Origin" => '*', -"Access-Control-Allow-Methods" => 'GET,POST,PATCH,DELETE,PUT,OPTIONS', -"Access-Control-Allow-Headers" => 'Origin, Content-Type, X-Auth-Token, content-type',
With this setup the GET and POST worked for me!
Source: Stackoverflow.com