I am just learning Anuglar 2 by creating a small project. This project is dependent on an external API that does not allow CORS. Because I only need to make GET requests on the API I am comfortable making the simple type of GETs that avoids the CORS restriction.
When I execute my code then I see in my Firefox developer tools network surveillance that the call goes through as a GET (Not an "Option" as would be the case if I were truly blocked by CORS) and I can see a valid response with HTTP status 200.
The problem is that my angular code still fails with the "Standard" CORS error and dumps an object.
I Tried reading through the dumped object in the hopes of understanding the error better, but so far no luck.
I did try googling this, but the majority of cases are not satisfied with the simple requests that gets around CORS so I were not able to find some help on my own.
This does not seem to be a Firefox problem because I can see the succeeded GET request, so I believe it is a Angular 2 problem. Can you help me get this working?
Here is my code sample including the URL to the external API:
testingObervable(): void {
this._http
.get(`http://oda.ft.dk/api/Sag?$inlinecount=allpages&$filter=typeid%20eq%203`,
{ headers: this.getHeaders() })
.subscribe(data => {
console.log(data);
});
}
private getHeaders() {
let headers = new Headers();
headers.append('Accept', '*/*');
return headers;
}
Here is the "Standard" CORS Error I get in Firefox:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://oda.ft.dk/api/Sag?$inlinecount=allpages&$filter=typeid%20eq%203. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Here is the response header from the External API:
HTTP/1.1 200 OK Cache-Control: no-cache Pragma: no-cache Content-Type: application/json; charset=utf-8 Expires: -1 Server: Microsoft-IIS/8.5 DataServiceVersion: 3.0 X-AspNet-Version: 4.0.30319 X-Powered-By: ASP.NET Date: Mon, 01 Jan 2018 17:13:14 GMT Content-Length: 34771
This is the collapsed version of the dumped object after the CORS error, I do not know if it is relevant, but it is sure not that informative to me.
ERROR Object { _body: error, status: 0, ok: false, statusText: "", headers: {…}, type: 3, url: null } core.js:1427
Some ressource on CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS