What is cross-domain
Cross-domain means that the browser cannot execute scripts from other websites.
Why cross-domain
Security restrictions are imposed on JavaScript because of the browser’s Same Origin Policy. Requests that do not share the same domain name, protocol, or port are not allowed by the browser (the browser will intercept the response returned by the request and give a cross-domain warning).
Are requests that are not of the same origin restricted
Cross-domain restricted behavior is browser-only. This is why there is no problem when calling the interface through the API request tool (e.g. postman), but there is a cross-domain warning when the request is initiated by browsing.
Cross-domain request, what does the browser do
request
1. Simple requests
Request method: GET, HEAD, and POST Request header fields: Accept, Accept-language, Content-language, and Content-type (The value can only be one of these three values: Application/X-wwW-form-urlencoded, Multipart /form-data, text/plain), last-event-ID, does not include custom header fields. (A lot of T.T., without hard back, probably know the meaning 8 ️)
If it is a simple request, the request will be sent directly.
2. Non-simple requests
Request mode: PUT, DELETE, PATCH, etc., including custom header fields…… (I understand that if a simple request is not satisfied, it is a non-simple request)
In order to confirm whether the server supports the non-simple request initiated by the client, the browser will first issue a preflight request. The request method is OPTIONS. After confirming that the server allows the request, the browser will issue a real request.
Return the response
After the browser receives the response, it verifies the following fields in the response header to determine whether the server allows the cross-domain request:
- Access-control-allow-origin: Specifies whether to include the request source or set it to all sources.
- Access-control-allow-methods: Specifies whether to include the requested method.
- Access-control-allow-headers specifies whether the request header field is allowed by the server.
- Access-allow-max-age (Validity period of the precheck request) : If this parameter is set and the validity period does not exceed, you do not need to send the precheck request repeatedly.
When the server Settings are satisfied, the simple cross-domain request returns the response data, while the non-simple cross-domain request sends the subsequent real request (the subsequent response is processed the same as above). When the server Settings are not met, the response data returned by a simple cross-domain request is directly intercepted by the browser and a cross-domain error is thrown. If the pre-check request sent by a non-simple cross-domain request is not allowed by the server, the subsequent request is ignored and the real request is not sent. (Emphasis!!)
Browsers allow embedding requests for cross-domain resources
<script src="..." >Embed cross-domain scripts<img>Tag embedded image<video>,<audio>Tags embed media resources<iframe>Tags are embedded in cross-domain resources<link rel="stylesheet" href="..." >Tags embedded in CSS- Font cross-domain
How do I resolve cross-domain restrictions
1. JSONP
Browsers allow requests to embed cross-domain resources:
JSOP can embed cross-domain scripts based on the feature of script tags. The url of cross-domain resources is filled in the script tag. The key point is that the URL has a callback function at the end of the URL to receive the returned cross-domain resources.
In particular, the client writes the callback in a URL and passes it to the server. A normal response would return a JSON string, but in the case of JSONP, the server would return the response with an executable Javascript string. E.g. res.send(‘callback(‘ + data + ‘)’)))) so that when the client receives the response returned from the request, Execute the JS string returned in the response message (should use eval) to get the cross-domain response data.
JSONP is only a JSON usage method agreed by the front and back ends, and supports only GET requests.
2. CORS
Set access-control-allow-Origin on the server and set the request source that needs to send cross-domain requests to this field to support cross-domain requests.
3. Server proxy
The main principle of server proxy is to let the server do proxy forwarding because the server is not restricted by the same origin.
Forward proxy: A forward proxy is when a client accesses a server of the same origin as it, and the server acts as a proxy to forward the request and receive the response back to the client. The client does not know which server it is actually accessing
Reverse proxy: the key to reverse proxy is address mapping. I.e., we send a request to the same source server, and the server maps another request address to the same source server, which then requests the address and returns the response to the client. The server that is finally requested does not know which client is actually requested
4. Cross domains based on the iframe
Window.name + iframe = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
What is window.name? It is literally used to set the name of the window, but it has the characteristic that when the contents of the window change, window.name remains the same.
Using this feature and the ability of iframe to embed cross-domain resources, we can implement cross-domain as follows:
In the source page A, manually create an iframe tag and embed it in the source page B. At this time, although we can embed the content of the source page B, but due to the same-origin policy, we can not get the resources in the source page B.
With the help of the window.name feature (which will not change after load), set the data we need to get in the window.name of the page of source B. Next, we only need to set the non-identical page source B as the proxy page source C, which is the same as the source A. You can get the cross-domain resource you just set in window.name.
That’s the end of this article. Thanks for reading and welcome to discuss
