Nginx configuration cross-domain request Access-Control-Allow-Origin * detailed explanation

Preface

When a 403 cross-origin error occurs No 'Access-Control-Allow-Origin' header is present on the requested resource parameters:

1. Solution

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. If you don't want to study it in depth, just read here =-=

II. Explanation

1. Access-Control-Allow-Origin

By default, servers are not allowed to cross domains. After configuring `Access-Control-Allow-Origin *` for the Nginx server, 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 the current request Content-Type is not supported. In fact, it was caused by the "application/json" type request we initiated. There is a concept involved here: preflight request. Please see the introduction of "preflight request" 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. Adding a 204 response to OPTIONS is to handle the error that Nginx still refuses access when sending a POST request

When sending a "preflight request", the method OPTIONS is required, so the server needs to allow this method.

3. Preflight request

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

The Cross-Origin Resource Sharing (CORS) standard adds a set of HTTP header fields that allow servers to declare which origins have access to which resources. In addition, the specification requires that for HTTP request methods that may have side effects on server data (especially HTTP requests other than GET, or POST requests with certain MIME types), the browser must first use the OPTIONS method to initiate a preflight request to learn whether the server allows the cross-domain request. The actual HTTP request is initiated only after the server confirms the permission. In the response to the pre-check request, the server can also notify the client whether it needs to carry identity credentials (including Cookies and HTTP authentication related data).

In fact, the request whose Content-Type field type is application/json is the POST request with certain MIME types mentioned above. According to CORS, Content-Type that does not belong to the following MIME types is a pre-check request:

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

Therefore, the application/json request will add a "pre-check" request before the formal communication. This "pre-check" request will carry 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
... some omitted

When the server responds, if the returned header information does not contain Access-Control-Allow-Headers: Content-Type, it means that non-default Content-Type is not accepted. The following error occurs:

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

Reference articles:

• Ruan Yifeng [Detailed explanation of cross-origin resource sharing CORS]
• MDN web docs [HTTP access control (CORS)]

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. Thank you for your support of 123WORDPRESS.COM.