<p style="text-align: left">
什么是跨域？
广义的跨域：
跳转： A
链接、
重定向、表单提交
2.) 资源嵌入：
、
函数）：
2.）jquery ajax：
3.）vue.js：
{
console.log(res);
})
后端node.js代码示例：
二、 document.domain + iframe跨域此方案仅限主域相同，子域不同的跨域应用场景。
页面都通过js强制设置document.domain为基础主域，就实现了同域。
1.）父窗口：(http://www.domain.com/a.html)
2.）子窗口：(http://child.domain.com/b.html)
document.domain = 'domain.com';
//
获取父窗口中变量
alert('get js data from parent ---> ' + window.parent.user);
三、 location.hash + iframe跨域
页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。
B域：b.html -> A域：c.html，a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象。
1.）a.html：(http://www.domain1.com/a.html)
2.）b.html：(http://www.domain2.com/b.html)
3.）c.html：(http://www.domain1.com/c.html)
// 监听b.html传来的hash值
window.onhashchange = function () {
// 再通过操作同域a.html的js回调，将结果传回
window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=',''));
};
四、 window.name + iframe跨域
属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。
1.）a.html：(http://www.domain1.com/a.html)
页面
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，释放内存；这也保证了安全（不被其他域frame js访问）
function destoryFrame() {
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.body.removeChild(iframe);
}
};
// 请求跨域b
页面数据
proxy('http://www.domain2.com/b.html',function(data){
alert(data);
});
2.）proxy.html：(http://www.domain1.com/proxy....
中间代理页，与a.html同域，内容为空即可。
3.）b.html：(http://www.domain2.com/b.html)
window.name = 'This is domain2 data!';
总结：通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。
五、 postMessage跨域
属性之一，它可用于解决以下方面的问题：
页面和其打开的新窗口的数据传递
页面与嵌套的iframe消息传递
用法：postMessage(data,origin)方法接受两个参数
支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
1.）a.html：(
http://www.domain1.com/a.html
)
2.）b.html：(http://www.domain2.com/b.html)
// 接收domain1的数据
window.addEventListener('message',function(e) {
alert('data from domain1 ---> ' + e.data);
var data = JSON.parse(e.data);
if (data) {
data.number = 16;
// 处理后再发回domain1
window.parent.postMessage(JSON.stringify(data),'http://www.domain1.com');
}
},false);
六、 跨域资源共享（CORS）
Nginx反向代理中设置proxy_cookie_domain 和 八、NodeJs中间件代理中cookieDomainRewrite参数的设置。
支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。
1、 前端设置：
1.）原生ajax
代码：
3.）vue框架
代码：
2、 服务端设置：
1.）Java后台：
2.）Nodejs后台示例：
后台设置
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...');
七、 Nginx代理跨域
1、 Nginx配置解决iconfont跨域
文件(eot|otf|ttf|woff|svg)例外，此时可在Nginx的静态资源服务器中加入以下配置。
2、 Nginx反向代理接口跨域
调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。
Nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。
Nginx具体配置：
修改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;
}
}
1.) 前端代码示例：
Nginx中的代理服务器
xhr.open('get','http://www.domain1.com:81/?user=admin',true);
xhr.send();
2.) Nodejs后台示例：
前台写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...');
八、 Nodejs中间件代理跨域
Nginx相同，都是通过启一个代理服务器，实现数据的转发，也可以通过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登录认证。
1、 非vue框架的跨域（2次跨域）
1.）前端代码示例：
2.）中间件服务器：
修改响应头信息，实现跨域并允许带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...');
3.）Nodejs后台同（六：Nginx）
2、 vue框架的跨域（1次跨域）
页面与代理接口之间不再跨域，无须设置headers跨域信息了。
修改
}],noInfo: true
}
}
九、 WebSocket协议跨域
不支持webSocket的浏览器提供了向下兼容。
1.）前端代码：
user input：
2.）Nodejs socket后台：
' + msg);
});
// 断开处理
client.on('disconnect',function() {
console.log('Client socket has closed.');
});
});
总结
解决方案的全部内容，如果您在阅读的过程中有什么问题，可以给在下留言，小编会及时回复大家的，希望对大家有所帮助。
原文链接：https://www.f2er.com/js/36290.html
