3.1、JSONP
html页面开发时,我们经常会使用 script、img、link、iframe 标签引入对应的资源,我们发现它们有个共同特点就是可以引入任意域名下的资源,不存在跨域问题。因此我们利用 script 的特点,创建一个带网址的跨域通信。
具体的实现过程如图:
原生请求代码为例如下:
// 注意 – 函数声明放前边
node服务代码为:
var querystring = require(‘querystring’);
var http = require(‘http’);
var server = http.createServer();
server.on(‘request’, function(req, res) {
console.log(req.url.split)
var params = querystring.parse(req.url.split(‘?’)[1]);
console.log(‘params’,params)
var fn = params.callback;
// jsonp返回设置
res.writeHead(200, { ‘Content-Type’: ‘text/javascript’ });
res.write(fn + ‘(’ + JSON.stringify(params) + ‘)’);
res.end();
});
server.listen(‘3000’);
运行服务执行成功之后就会打印出:
{
callback: “back”
user: “‘111’”
}
JSONP 的缺点:只允许处理 get 请求,由于请求的数据都暴露在url中,容易被劫持,安全性很差,所以不推荐使用。
3.2、CORS 跨域资源共享
通过设置响应头处理的,需要后台配合处理。如果只是普通跨域请求,前端无需设置,后台设置
Access-Control-Allow-Origin,如:
/* 允许所有域名访问 */
response.setHeader(“Access-Control-Allow-Origin”,“*”);
/* 只允许某个域名访问 */
header(“Access-Control-Allow-Origin: www.xxx.xom”);
如果需要带cookie请求,前端也需要设置字段。如:
// 前端设置是否带cookie
xhr.withCredentials = true;
特点:客户端发送(ajax fetch)请求,后台设置请求头相关信息,允许哪些源请求数据,需要处理 options 试探性请求。
3.3、proxy 代理
因为服务器间的数据交互没有跨域限制,所以通过一个中间代理服务器请求目标服务器的数据,也就是前端服务器发送请求到代理服务器,代理服务器再请求目标服务器,将数据返回给前端服务器。
我们现在常用的三方框架 VUE、React项目中跨域解决方案都使用的是代理。如config.js中代理配置如下:
proxy: { //配置跨域
‘/’: {
target: ‘http://www.xxxx.com/’, //线上
changOrigin: true, //允许跨域
pathRewrite: {
‘^/’: ‘’
}
},
}
3.4、nginx反向代理
nginx反向代理,只需要后台配置服务就可以了,前端无需任何操作。其原理是:浏览器将请求发送到反向代理服务器,由反向代理服务器去选择目标服务器获取数据,再返回给浏览器,此时暴露的是代理服务器的地址,隐藏了真实的服务器地址。
3.5、postMessage
postMessage 是全局对象 window 的属性之一。可以安全地实现跨域通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制,只要正确地使用,这种方法就很安全。
使用语法:
window.postMessage(data,url)
具体实现案例如下:
// a页面 – http://localhost:1000/a.html
// b页面 – http://localhost:2000/b.html