Nginx configuration cross domain request Access Control Allow Origin * details

preface

When a 403 cross domain error occurs No 'Access-Control-Allow-Origin' header is present on the requested resource , the header parameter of the response needs to be configured to the Nginx server:

1. Solutions

You only need to configure the following parameters in the Nginx configuration file:

location / { 
 add_header Access-Control-Allow-Origin *;
 add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
 add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

 if ($request_method = 'OPTIONS') {
  return 204;
 }
} 

The above configuration code can solve the problem, do not want to further study, see here can =-=

2. Explain

1. Access-Control-Allow-Origin

Servers are not allowed to cross domains by default. When the Nginx server is configured with 'Access-Control-Allow-Origin *', it means that the server can accept all request sources (Origin), that is, accept all cross-domain requests.

2. Access-Control-Allow-Headers is to prevent the following errors:

[

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

]

This error indicates that the value of Content-Type is not supported for the current request. We actually initiated the "application/json" type request. There is a concept involved here: precheck requests (preflight request), as described in "precheck requests" below.

3. Access-Control-Allow-Methods is to prevent the following errors:

[

Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

]

4. The return of 204 was added to OPTIONS to handle the error that Nginx still denied access when the POST request was sent

The method OPTIONS is needed to send the precheck request, so the server needs to allow it.

3. Precheck request (preflight request)

In fact, the above configuration involves an W3C standard: CROS, the full name is cross-domain resource sharing (Cross-origin resource sharing), which is proposed to solve cross-domain requests.

[

The cross-domain resource sharing (CORS) standard adds a new set of HTTP header fields that allow the server to declare which source sites have access to which resources. In addition, the specification requires that for HTTP request methods (HTTP requests other than GET, or POST requests with some MIME types) that may have side effects on the server data, the browser must first make a pre-check request (preflight request) using the OPTIONS method to know whether the server will allow the cross-domain request. The actual HTTP request is initiated only after the server confirms permission. In the return of the precheck request, the server side can also notify the client if it needs to bring along its credentials (including Cookies and HTTP authentication related data).

]

In fact, the request with the Content-Type field of type application/json is the POST request with some MIME types mentioned above. According to CORS, Content-Type does not belong to the following MIME types, but all of them are pre-check requests:

[

application/x-www-form-urlencoded
multipart/form-data
text/plain

]

Therefore, the request for application/json will be added one "precheck" request before the formal communication. This "precheck" request will be accompanied by the header information Access-Control-Request-Headers: Content-Type:

OPTIONS /api/test HTTP/1.1
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: Content-Type
...  omitted 1 some 

When the server responds, it returns a header message that does not contain Access-Control-Allow-Headers: Content-Type that does not accept the non-default Content-Type. The following error occurs:

[

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

]

Reference article:

Ruan 1 feng [cross-domain resource sharing CORS details] MDN web docs [HTTP access control (CORS)]

conclusion