javascript - CORS preflight issue in Angular 7 application - response headers ignored - Stack Overflow

admin 管理员组

文章数量: 1086019

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?

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?

• javascript
• node.js
• angular
• express
• nginx

Share Improve this question Follow edited Oct 1, 2021 at 8:27 Guerric P 31.9k66 gold badges5858 silver badges106106 bronze badges asked Dec 20, 2018 at 16:02 AliAli 7,4932222 gold badges105105 silver badges164164 bronze badges 1

• The problem isn’t that the response lacks CORS headers — instead it’s just that response is a 401 error instead of a 200 OK. And the cause is, the nginx server you’re sending the request to — at tje environment.url URL — apparently isn’t configured to respond to OPTIONS requests correctly. It must be configured to respond to unauthenticated OPTIONS requests, regardless of the origin, with a 200 OK — & with the right CORS headers. But when it’s responding with a 401 instead of a 200, it really doesn’t matter whether it has the right CORS headers or not— because that 401 makes the preflight fail – sideshowbarker ♦ Commented Dec 20, 2018 at 23:11

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.

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.

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.

本文标签： javascriptCORS preflight issue in Angular 7 applicationresponse headers ignoredStack Overflow