Shulou(Shulou.com)06/02 Report--

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

I. solution

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

Location / {add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"; add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";}

The above configuration code can solve the problem. If you don't want to study it in depth, you can see it here.

Second, explain 1. Access-Control-Allow-Origin

Servers are not allowed to cross domains by default. When Access-Control-Allow-Origin * is configured for the Nginx server, it means that the server can accept all request sources (Origin), that is, 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 is because we have initiated a type request for "application/json". A concept is involved here: pre-check request (preflight request). See the introduction of "pre-check 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.

The method OPTIONS is required when sending a "pre-check request", so the server needs to allow it.

3. Pre-check request (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 is proposed to solve cross-domain requests.

Cross-domain resource sharing (CORS) standard adds a set of HTTP header fields that allow servers to declare which origin servers 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 some MIME types), browsers must first use the OPTIONS method to initiate a pre-check request (preflight request) to know whether the server allows the cross-domain request. The server confirms the permission before initiating the actual HTTP request. In the return of the pre-check request, the server can also inform the client whether it needs to carry identity credentials (including Cookies and HTTP authentication-related data).

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

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

Therefore, application/json 's request will be added with a "pre-check" request before the formal communication, this time with the header 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... Some are omitted.

When the server responds, the header information returned does not contain Access-Control-Request-Headers: Content-Type, which means that the 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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.