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

This article focuses on "how to configure cross-domain Nginx", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to configure cross-domain Nginx.

When a No 'Access-Control-Allow-Origin' header is present on the requested resource occurs when a cross-domain error occurs, you need to configure the header parameters of the response to the Nginx server. Let's take a look.

I. configure cross-domain

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-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 will solve the problem.

Second, parameter description

1. Access-Control-Allow-Origin

Servers are not allowed to cross domains 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, 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.

4. The return of 204is added to OPTIONS to handle the error that Nginx still denies access when sending a POST request

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.1 Origin: http://foo.example Access-Control-Request-Method: POST Access-Control-Request-Headers: Content-Type...

When the server responds, the header information returned does not contain Access-Control-Allow-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. At this point, I believe you have a deeper understanding of "how to configure cross-domain Nginx". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.