前端常见跨域解决方案（全）

<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>

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); })

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...');

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

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

<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);

var proxy = function(url, callback) { var state = 0; 
var iframe = document.createElement('iframe'); // 加载跨域页面 iframe.src = url;

// onload事件会触发2次，第1次加载跨域页，并留存数据于window.name iframe.onload = function() { if (state === 1) { // 第2次onload(同域proxy页)成功后，读取同域window.name中数据 callback(iframe.contentWindow.name); 
destoryFrame();
 } 
else if (state === 0) { 
// 第1次onload(跨域页)成功后，切换到同域代理页面 iframe.contentWindow.location = 'http://www.domain1.com/proxy.html'; state = 1;
 } 
}; 
document.body.appendChild(iframe);

iframe.contentWindow.document.write('');
 iframe.contentWindow.close(); 
document.body.removeChild(iframe); 
}

<script> window.name = &#39;This is domain2 data!&#39;;</script>

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe><script> var iframe = document.getElementById(&#39;iframe&#39;);
 iframe.onload = function() { var data = { name: &#39;aym&#39; };// 向domain2传送跨域数据 iframe.contentWindow.postMessage(JSON.stringify(data), &#39;http://www.domain2.com&#39;); }; // 接受domain2返回数据 window.addEventListener(&#39;message&#39;, function(e) {
 alert(&#39;data from domain2 ---> &#39; + e.data); 
}, false);</script>

<script> // 接收domain1的数据 window.addEventListener(&#39;message&#39;, function(e) { 
alert(&#39;data from domain1 ---> &#39; + e.data); var data = JSON.parse(e.data); 
if (data) { data.number = 16; 
// 处理后再发回domain1
 window.parent.postMessage(JSON.stringify(data), &#39;http://www.domain1.com&#39;); } 
}, 
false);</script>

var xhr = new XMLHttpRequest();// IE8/9需用window.XDomainRequest兼容// 前端设置是否带cookiexhr.withCredentials = true;xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { 
alert(xhr.responseText); 
}
};

var http = require('http');var server = http.createServer();var qs = require('querystring');
server.on('request', function(req, res) { 
var postData = ''; 
// 数据块接收中 req.addListener('data', function(chunk) {
 postData += chunk; }); 
// 数据接收完毕 req.addListener('end', function() {
 postData = qs.parse(postData); // 跨域后台设置 res.writeHead(200, { 'Access-Control-Allow-Credentials': 'true', // 后端允许发送Cookie 'Access-Control-Allow-Origin': 'http://www.domain1.com', // 允许访问的域（协议+域名+端口） 'Set-Cookie': 'l=a123456;Path=/;
Domain=www.domain2.com;HttpOnly' // HttpOnly:脚本无法读取cookie }); res.write(JSON.stringify(postData)); res.end();
 });
});
server.listen('8080');
console.log('Server is running at port 8080...');

#proxy服务器server { 
listen 81; 
server_name www.domain1.com; 
location / { 
proxy_pass http://www.domain2.com:8080; #反向代理 proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
 index index.html index.htm; 
# 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用 add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时，可为*
 add_header Access-Control-Allow-Credentials true;
 }
}

var http = require('http');var server = http.createServer();var qs = require('querystring');
server.on('request', function(req, res) { 
var params = qs.parse(req.url.substring(2)); // 向前台写cookie res.writeHead(200, { 
'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:脚本无法读取 });
 res.write(JSON.stringify(params)); res.end();
});
server.listen('8080');console.log('Server is running at port 8080...');

var xhr = new XMLHttpRequest();// 前端开关：浏览器是否读写cookiexhr.withCredentials = true;// 访问http-proxy-middleware代理服务器xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
xhr.send();

var express = require('express');var proxy = require('http-proxy-middleware');var app = express();
app.use('/', proxy({ 
// 代理跨域目标接口 target: 'http://www.domain2.com:8080', 
changeOrigin: true, 
// 修改响应头信息，实现跨域并允许带cookie onProxyRes: function(proxyRes, req, res) { 
res.header('Access-Control-Allow-Origin', 'http://www.domain1.com'); res.header('Access-Control-Allow-Credentials', 'true'); }, 
// 修改响应信息中的cookie域名 cookieDomainRewrite: 'www.domain1.com' // 可以为false，表示不修改}));
app.listen(3000);console.log('Proxy server is listen at port 3000...');

module.exports = { 
entry: {}, module: {}, 
... 
devServer: { 
historyApiFallback: true,
 proxy: [{
 context: '/login', 
target: 'http://www.domain2.com:8080', // 代理跨域目标接口 changeOrigin: true, 
cookieDomainRewrite: 'www.domain1.com' // 可以为false，表示不修改
 }], 
noInfo: true }}

<p>user input：<input type="text"></p><script src="./socket.io.js"></script><script>var socket = io(&#39;http://www.domain2.com:8080&#39;);// 连接成功处理socket.on(&#39;connect&#39;, function() { // 监听服务端消息
 socket.on(&#39;message&#39;, function(msg) { 
console.log(&#39;data from server: ---> &#39; + msg);
 }); // 监听服务端关闭 socket.on(&#39;disconnect&#39;, function() { 
console.log(&#39;Server socket has closed.&#39;); 
});
});document.getElementsByTagName(&#39;input&#39;)[0].onblur = function() { 
socket.send(this.value);};</script>

var http = require('http');var socket = require('socket.io');// 启http服务var server = http.createServer(function(req, res) { 
res.writeHead(200, { 
'Content-type': 'text/html'
 }); 
res.end();
});
server.listen('8080');console.log('Server is running at port 8080...');// 监听socket连接socket.listen(server).on('connection', function(client) { 
// 接收信息 client.on('message', function(msg) { 
client.send('hello：' + msg); 
console.log('data from client: ---> ' + msg);
 }); 
// 断开处理 client.on('disconnect', function() { 
console.log('Client socket has closed.');
 });
});

document.domain
document.domain
的作用是用来获取/设置当前文档的原始域部分，例如：
// 对于文档 www.example.xxx/good.htmldocument.domain="www.example.xxx"// 对于URI http://developer.mozilla.org/en/docs/DOM document.domain="developer.mozilla.org"