Cross-domain issues
Cross-domain means that the request has reached the server, but is restricted by the browser when it comes back. Just like Python can grab data, you can get data without going through a browser to initiate a request. I think of using Nginx's reverse proxy to solve cross-domain problems.
Proxy server
Proxy server. When the client sends a request, it will not send it directly to the destination host, but first send it to the proxy server. After the proxy service accepts the client request, it sends it to the host, and receives the data returned by the destination host and stores it in the proxy. In the hard disk of the server, send it to the client.
Forward proxy
The user knows the address of the target server, but cannot directly access it due to network restrictions and other reasons. At this time, you need to connect to the proxy server first, and then the proxy server can access the target server. For example, we can't access Google, but I have a vps abroad, it can access Google, I access it, after asking it to access Google, send the data to me.
Reverse proxy
The so-called reverse proxy is just the opposite of the forward proxy. The proxy server serves the target server, although the overall request return route is the same from Client to Proxy to Server.
For example, when we visit Baidu's website, the external domain name of Baidu's proxy server is https://www.baidu.com. We don't know the specific internal server node. In reality, after we visit Baidu’s proxy server, the proxy server forwards the request to one of their N server nodes for us to search and return the result.
Another example: We also need money, but we don't know who has the money, so we found an online lending platform. After you submit your information, the online lending platform will send you the money directly. But you don’t know and don’t have to pay attention to where the money comes from online lending platforms. In the online lending platform, from which wealthy owner they may raise money. For you, the online loan platform and their funder are the same.
Also from the above example, we can see that the proxy server and the target host behind are a system (Baidu company, online loan platform). They provide services to the outside world, so they are called reverse agents, and they are the people behind.
Nginx reverse proxy configuration
When a 403 cross-domain error occurs, No'Access-Control-Allow-Origin' header is present on the requested resource, you need to configure the response header parameter for the Nginx server
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
Configure the following parameters in 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;
}
}
Explanation
1. Access-Control-Allow-Origin
The server is not allowed to cross domains by default. Access-Control-Allow-Origin *After configuring 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 currently requested Content-Type is not supported. In fact, we initiated the "application/json" type request. This involves a concept: preflight request (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. 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.
Preflight request
In fact, the above configuration involves a W3C standard: CROS, the full name is Cross-origin resource sharing (Cross-origin resource sharing), it is proposed to solve cross-domain requests.
The Cross-Origin Resource Sharing (CORS) standard has added a set of HTTP header fields to 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 pre-check request ( preflight request) to know whether the server allows the cross-domain request. After the server confirms permission, the actual HTTP request is initiated. In the return of 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, a request whose Content-Type field is application/json is the aforementioned POST request with certain MIME types. CORS stipulates that Content-Type that does not belong to the following MIME types is a preflight 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 time the "pre-check" request will bring 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, if the returned header information does not contain Access-Control-Allow-Headers: Content-Type, it means that the non-default Content-Type is not accepted. The following error occurred:
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.