Common cross-domain solutions for front-end (all)

I often see cross-domain related content in my studies. This article will provide cross-domain solutions for the star realm.

Cross-domain solution
1. Cross-domain via jsonp
2. Document.domain iframe cross-domain
3. Location.hash iframe
4. Window.name iframe cross-domain
5. postMessage cross-domain
6. Cross-domain resource sharing (CORS)
7. nginx proxy cross-domain
8. nodejs middleware proxy cross-domain
9. WebSocket protocol cross-domain
1. Cross-domain through jsonp
Usually in order to reduce the load on the web server, we separate static resources such as js, css, img, etc. to another server with an independent domain name, and then use the corresponding tags in the html page from Loading static resources under different domain names is allowed by the browser. Based on this principle, we can dynamically create a script and then request a URL with parameters to achieve cross-domain communication.
1.) Native implementation:

<script> 
  var script = document.createElement(&#39;script&#39;); 
script.type = &#39;text/javascript&#39;; // 传参并指定回调执行函数为onBack script.src = &#39;http://www.domain2.com:8080/login?user=admin&callback=onBack&#39;; document.head.appendChild(script); // 回调执行函数 function onBack(res) {
 alert(JSON.stringify(res)); 
} </script>

The server returns as follows (the global function is executed when returning):

onBack({"status": true, "user": "admin"})
2.）jquery ajax：
$.ajax({ url: 'http://www.domain2.com:8080/login', type: 'get', dataType: 'jsonp', // 请求方式为jsonp jsonpCallback: "onBack", // 自定义回调函数名 data: {}});

3.）vue.js：
this.$http.jsonp('http://www.domain2.com:8080/login', { params: {}, jsonp: 'onBack'}).then((res) => { console.log(res); })

Backend node.js code example:

var querystring = require('querystring');var http = require('http');var server = http.createServer();
server.on('request', function(req, res) {var params = qs.parse(req.url.split('?')[1]); 
var fn = params.callback; // jsonp返回设置 res.writeHead(200, { 'Content-Type': 'text/javascript' }); 
res.write(fn + '(' + JSON.stringify(params) + ')'); 
res.end();});
server.listen('8080');console.log('Server is running at port 8080...');

jsonp Disadvantages: Only one kind of get request can be implemented.
2. document.domain iframe cross-domain
This solution is limited to cross-domain application scenarios where the main domain is the same but the subdomains are different.
Implementation principle: Both pages forcefully set document.domain as the basic main domain through js, thus achieving the same domain.
1.) Parent window: (http://www.domain.com/a.html))

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe><script> document.domain = &#39;domain.com&#39;; var user = &#39;admin&#39;;</script>

2.) Child window: ([http://child.domain.com/ b.html)

<script> document.domain = &#39;domain.com&#39;; // 获取父窗口中变量 alert(&#39;get js data from parent ---> &#39; + window.parent.user);</script>

3. location.hash iframe cross-domain
Implementation principle: a wants to communicate with b across domains, through the intermediate page c. For three pages, the location.hash of iframe is used to transfer values ​​between different domains, and direct js access is used to communicate between the same domains.
Specific implementation: A domain: a.html -> B domain: b.html -> A domain: c.html, different domains a and b can only communicate one-way through hash values, b and c are also different Domains can only communicate in one direction, but c and a are in the same domain, so c can access all objects on the a page through parent.parent.
1.) a.html: ([http://www.domain1.com/a.html)]

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe><script> var iframe = document.getElementById(&#39;iframe&#39;); 
// 向b.html传hash值 setTimeout(function() {
 iframe.src = iframe.src + &#39;#user=admin&#39;; 
}, 1000);

// Open to the callback method function onCallback(res) of the same domain c.html ) { alert('data from c.html ---> ' res); }

2.) b.html: (http://www.domain2. com/b.html))