一、跨域解决
1.JSONP
采用script标签,此处前端代码示例:
<button id="btn">点击</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#btn').click(function(){
var frame = document.createElement('script');
frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func';
$('body').append(frame);
});
function func(res){
alert(res.message+res.name+'今年'+res.age+'岁');
}
</script>
服务器端代码nodeJS :
router.get('/article-list', (req, res) => {
console.log(req.query, '123');
let data = {
message: 'success!',
name: req.query.name,
age: req.query.age
}
data = JSON.stringify(data)
res.end('func(' + data + ')');
});
参考:https://blog.csdn.net/badmoonc/article/details/82289252
JSONP优点:①兼容性好,旧一点的浏览器也支持
②能直接访问响应文本,支持在浏览器和服务器之间双向通信
缺点:①只支持GET请求
②不够安全,请求的域如果不安全,可能会携带恶意代码
2、CORS – 跨站资源共享,它是跨域的官方解决方案,升级版的JSONP。原理是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。请求和响应都不包含cookie信息。
CORS需要浏览器和后院同时支持,浏览器会自动进行CORS通信,实现CORS通信的关键是后端,只要后端实现了CORS,就实现了跨域,服务端设置Access-Control-Allow-Origin 就可以开启CORS,该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源。
3、webSockets – 不受同源策略影响。原理是因为它不使用HTTP协议,而使用一种自定义的协议,专门为快速传输小数据设计。
4、Nginx – 代理跨域。反向代理跨域。
感谢作者分享:https://www.jianshu.com/p/827b041be446