为了保证用户信息的安全，防止恶意的网站窃取数据。浏览器有同源策略，对资源访问做出了限制：
（1） Cookie、LocalStorage 和 IndexDB 无法读取。
（2） DOM 无法获得。
（3） AJAX 请求不能发送。
要解除这些限制，需要进行跨域，先来了解一些小知识：
（1） script标签、link标签、img标签的请求不受同源策略的限制
（2）同源策略只在浏览器环境有，node，安卓，ios，java等环境都没有
（3）跨域了的请求不是发不出去，服务器可以正常返回结果，只是被浏览器拦截了。
总结一下比较常用的几个跨域的方法：
JSONP
总的来说就是利用 script 标签不受限制的特点，通过动态创建 script 标签，将跨域资源的路径放在 src 路径里，同时定义好一个回调函数，将这个回调函数的函数名拼接在URL里，然后将这个 script 标签插入页面中，script 标签就会去请求路径资源，后端接收到请求，返回一个回调函数的调用，并返回数据："回调函数名(data)" ，前端接收到这个"回调函数的调用"，就会去调用自己已经定义好的回调函数。
贴一下前端代码：
// 定义回调函数
var callback1 = function(data){
alert(data);
};
// 提供jsonp服务的url地址（不管是什么类型的地址，最终生成的返回值都是一段javascript代码，即回调函数的执行）
var url = "http://xxx.com?callback=callback1";
// 创建script标签，设置其属性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签插入页面
document.getElementsByTagName('head')[0].appendChild(script);
// 后端只需识别到这个 url 的请求，返回这个回调函数的调用的 js 代码，带上数据即可
//...
response.write(`callback.call(undefined,data)`)
总结一下JSONP的实现：
客户端：
- 定义获取数据后调用的回调函数
- 动态生成 script 标签，并设置其 src 的 url 为提供 jsonp 服务的 url 地址，并在该 url 中设置相关回调函数参数
- 将 script 标签插入页面
服务端：
将客户端发送的callback参数作为函数名来包裹住JSON数据，返回数据至客户端。
jQuery、axios 中都实现了对JSONP的封装，但原理大抵相同。
但 JSONP 有一个致命的缺点：请求的方法只能是 "GET"
CORS
一种比较常用的跨域解决方案，只需后端设置
Access-Control-Allow-Origin: *
此时，所有外域都可以访问直接访问这个域了，网上的公共接口便是这样做的。
如果只想对指定的域开放：
Access-Control-Allow-Origin: http://foo.example
现在，除了 http://foo.example，其它外域均不能访问该资源
代理
前端在请求外域资源时，用一个指定的同源的路径，前端需要访问外域资源时，去访问这个同源的路径，客户端nginx拦截代码中虚假的http请求，替换成正确的http
网友评论