CORS preflight issue in Angular 7 application - response headers ignored

Question

This has been causing me some issues for a while now. I have a set of apis set up - when I make a POST request to them I get all the required response headers in postman.

Access-Control-Allow-Credentials →true
Access-Control-Allow-Headers →*
Access-Control-Allow-Methods →GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin →*

However my basic http.post fails in my Angular application as its sending in an OPTIONS preflight request. But the response doesn't seem to add up right. Here are the headers of request sent and the response recieved in the console:

REQUEST

Host: ...
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:62.0) Gecko/20100101 Firefox/62.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,ur;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Origin: http://localhost:4200
Connection: keep-alive

RESPONSE

HTTP/1.1 401 Unauthorized
Server: nginx/1.15.7
Date: Thu, 20 Dec 2018 15:45:49 GMT
Content-Type: application/json; charset=utf-8
Content-Length: 61
Connection: keep-alive
X-Powered-By: Express
ETag: W/"3d-q6cGyOBiwGshxQdcFRrR1zCi7Cw"

The error message in the console is: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at (Reason: CORS header 'Access-Control-Allow-Origin' missing).

But thats not true - the server is set up to send all correct headers.

Here is my code:

const httpOptions = {
  headers: new HttpHeaders({'Content-Type': 'application/json' })
};

...

  login(email:string, password:string){
    var url = environment.url;

    let data = {email:email, password:password};

    let response = this.http.post(url, (data), httpOptions);
    return response;
  }

I need to send data as application/json content type plus all the required headers are set up on the server. So what exactly is the problem here?

Answer 1

The OPTIONS request is not related with Angular, it is triggered by your browser because you are accessing a resource from another domain.

So the solution is to add the Access-Control headers to the OPTIONS verb on your Express server, as they are not present in the response headers you pasted.

Answer 2

Your server response was:

HTTP/1.1 401 Unauthorized
Server: nginx/1.15.7
Date: Thu, 20 Dec 2018 15:45:49 GMT
Content-Type: application/json; charset=utf-8
Content-Length: 61
Connection: keep-alive
X-Powered-By: Express
ETag: W/"3d-q6cGyOBiwGshxQdcFRrR1zCi7Cw"

You wrote

...thats not true - the server is set up to send all correct headers .

Which clearly shows what you wrote is not valid.

Your server response is missing a header:

Access-Control-Allow-Origin: *

Which will make your statement valid again.

Answer 3

What is your Angular running URL? http://localhost:4200 ? And your API endpoint address? "Cross-Origin Request Blocked" that means the http request was sending by a Unauthorized URL (sometimes your local dev angular url is localhost, but API is different domain,like: http://firebase/api . that case, the API treat your localhost is Unauthorized domain). For this issue, you need to set your API's CORS to allow accepting the http request from your localhost. Hope I can help, thanks for any input.