Nginx configuration cross-domain request error Access-Control-Allow-Origin * How to solve

Preface

When a 403 cross-domain error occurs no 'access-control-allow-origin' header is present on the requested resource, you need to give nginx server configuration response header 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 in depth, just look here =-=

2. Explanation

1. access-control-allow-origin

The server is not allowed to cross domain by default. After configuring `access-control-allow-origin *` for the nginx server, it means that the server can accept all request sources (origin), that is, it accepts 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 us initiating an "application/json" type request. This involves a concept: preflight request. Please see the introduction of "preflight request" below.

3. access-control-allow-methods is to prevent the following error:

content-type is not allowed by access-control -allow-headers in preflight response.

4. Add a 204 return to options to handle the error that nginx still refuses access when sending a post request

When sending a "preflight request", the method options needs to be used, 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-domain resource sharing (cross -origin resource sharing), which was 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 origin sites have permission to access which resources. In addition, the specification requires that for those 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 ( preflight request) to learn whether the server allows the cross-domain request. After the server confirms permission, it initiates the actual http request. In the return of the preflight request, the server can also notify the client whether it needs to carry identity credentials (including cookies and http authentication related data).

In fact, requests with the content-type field of application/json are the above-mentioned post requests with certain mime types. Cors stipulates that content-type does not belong to the following mime types. , all belong to preflight requests:

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

So the application/json request will add a "preflight" request before formal communication. This "preflight" request will bring 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
... 省略了一些

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. That is, the following error occurs:

request header field content-type is not allowed by access-control-allow-headers in preflight response.

The above is the detailed content of Nginx configuration cross-domain request error Access-Control-Allow-Origin * How to solve. For more information, please follow other related articles on the PHP Chinese website!