Nginx Configuration cross-domain request Access-control-allow-origin *

When a 403 cross-domain error occurs No ‘Access-Control-Allow-Origin‘ header is present on the requested resource, you need to configure the header parameters for the response to the Nginx server:

First, the 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-Headers "Origin, X-Requested-With, Content-Type, Accept";  

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

Ii. interpretation of 1. Access-control-allow-origin

The server is not allowed to cross the domain by default. After configuring the Nginx server 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-headersis to prevent the following errors from occurring:

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, we initiated the "Application/json" type request caused. Here is a concept: see the 预检请求（preflight request） "preflight request" section below.

3. Access-control-allow-methodsis to prevent the following errors from occurring:

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

When sending a preflight request, the method needs to be used OPTIONS , so the server needs to allow the method.

III. Pre-inspection requests (Preflight request)

In fact, the above configuration involves a universal standard: CROS The full name is cross-domain resource sharing (cross-origin resource sharing), it is proposed to solve the cross-domain request.

The cross-domain resource sharing (CORS) standard adds a new set of HTTP header fields that allow the server to declare which source stations have access to which resources. In addition, the specification requires that the browser must first use the OPTIONS method to initiate a preflight request ( especially HTTP requests other than GET, or with some MIME-type post requests) that may have side-effects on the server data(pre Flight request) To see if the server is allowing the cross-domain requests. The actual HTTP request is initiated only after the server confirms the permission. On the return of the preflight request, the server side can also notify the client whether it is necessary to carry the credentials (including Cookies and HTTP authentication related data).

In fact, Content-Type字段的类型为application/json the request is said above 搭配某些 MIME 类型的 POST 请求 , cors rules, Content-type does not belong to the following MIME types, are pre-test requests:

application/x-www-form-urlencodedmultipart/form-datatext/plain

Therefore, Application/json's request will be added a "preflight" request before the official communication, this time "preflight" request will bring the head information Access-Control-Request-Headers: Content-Type :

OPTIONS /api/test HTTP/1.1Origin: http://foo.exampleAccess-Control-Request-Method: POSTAccess-Control-Request-Headers: Content-Type... 省略了一些

When the server responds, the header information that is returned does not Access-Control-Request-Headers: Content-Type accept non-default content-type if it is not included. The following error occurred:

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

Nginx Configuration cross-domain request Access-control-allow-origin *