Angular 2: Simple Get request to external API blocked for CORS but got 200 in network surveillance

Question

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

Answer 1

This is not an issue with your code or with Angular. It's how CORS is supposed to work.

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.

A request of this 'simple' type does not avoid the CORS restriction, but sending a preflight is not required for those requests. The response should still include CORS headers for the request to be allowed by the browser.

The resource on CORS that you link to points this out at the functional overview part (emphasis mine):

The Cross-Origin Resource Sharing standard works by adding new HTTP headers that allow servers to describe the set of origins that are permitted to read that information using a web browser. Additionally , for HTTP request methods that can cause side-effects on server's data (...), the specification mandates that browsers "preflight" the request (...)

In short, while CORS applies to all cross-origin HTTP requests, the preflight is only sent for certain kinds of HTTP requests.