跨域解决方案详解-优快云博客

一、跨域解决
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.youkuaiyun.com/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