Cross-domain can be said to be a very common problem in front-end development, although there are many similar online articles, but in line with the record of their own learning summary ideas, or to write their own article to record the knowledge learned.
Why cross domains?
The cross-domain problem is caused by the same origin policy of the browser. The same origin policy is based on the security of the browser. If everyone can access the file data of other sites at will, it will cause serious security problems.
So what is cross-domain? In the browser, any one of the following criteria is required to cross domains:
- Different request protocols include HTTP and HTTPS
- Different domain names: xxx.com and mmm.com
- Different ports: xxx.com and xxx.com:81
Several solutions across domains
1. JSONP
The principle of JSONP cross-domain implementation is to dynamically create script tags. SRC is the ability to access files across domains, create specified addresses and call specific callback methods to get data. JSONP only supports get methods.
2.CORS
The principle of CORS (Cross-domain resource sharing) is to add the specified mark in the HTTP request header to tell the browser whether to allow the loading of cross-domain resources, which is also the mainstream cross-domain solution.
3.iframe + location.hash
Iframe +location.hash implements cross-domain loading of resources using iframe, and then changes the location.hash of the parent window in iframe. Since the information of location.hash will be displayed in the URL, the length of the URL limits the length of the information content we transmit.
4. iframe + window.name
Iframe +location.hash implements cross-domain loading of resources using iframe, and then changes the value of window.name in the loaded content of the iframe window, using the window.name feature, all loaded pages in the current window share a window.name. However, the capacity of window.name cannot exceed 2 MB.
5. iframe + document.domain
If the main domain name of two pages is the same, but the subdomain name is different, you can modify document.domain to the same domain name, to realize the cross-domain communication between father and son domain name, only limit the main domain name is the same. (not strictly cross-domain)
6. postMessage
PostMessage is a new feature of the HTML5 standard that can be used to communicate across domains in a variety of scenarios, but it may not be supported in older browsers.
7. Reverse proxy
Cross-domain access is achieved through reverse proxy using Nginx or NodeJS middleware.
8. The WebSocket protocol
The WebScoket protocol supports cross-domain communication.
conclusion
Considering the above cross-domain solutions, the cross-domain solution is mostly on the server side, both in terms of security and practicality. Using a front-end approach to cross-domain solutions is more or less flawed, and the focus is on the ability of SRC, whether it’s iframe or creating scripts on the fly.