跨域请求，是前端开发比较常见的问题。通常为了提高的开发效率，项目开发过程中进行前后端分离，各自独立部署，就可能会出现前后端域名不一致，在通讯过程中就会出现跨域的问题。由于项目开发过程中涉及，借此机会对跨域问题进行整理，也是前端面试比较常见的问题。
为什么会有跨域问题？
这个问题是随着 AJAX 的兴起，Web 应用对跨域访问的需求就越来越多，AJAX 在进行跨域请求的时候受到浏览器安全限制。
浏览器出于安全的考虑，引入同源策略。这种策略会对页面上执行的 Javascript 访问资源的时候进行限制，比如不能直接通过 Javascript 访问不同源之下的页面DOM结构，同时在对不同源发送请求时也无法获取到服务器响应内容（服务器会正常处理请求并返回响应内容，但是返回的内容被浏览器拦截掉了）。
什么是同源策略？
同源策略 SOP（Same origin policy）是一种约定，首先由Netscape公司在1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指“协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
同源策略将限制以下几种行为：
Cookie、LocalStorage和IndexDB无法读取DOM和Javascript对象无法获得AJAX请求收到限制
什么是跨域
| URL | 说明 | 是否允许通信 |
http://www.devpoint.cn/name1.js 、http://www.devpoint.cn/name2.js |
同一域名不同路径 | 允许 |
http://www.devpoint.cn:8080 、 http://www.devpoint.cn |
同一域名不同端口 | 不允许 |
http://www.devpoint.cn 、http://crayon.devpoint.cn |
主域相同，子域名不同 | 不允许 |
http://www.devpoint.cn 、 http://www.aliyun.com |
主域不同 | 不允许 |
http://www.devpoint.cn 、 https://www.devpoint.cn |
协议不同 | 不允许 |
解决方案
jsonp
通常为了减轻web服务器的负载，把 js、css，img 等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，这是被浏览器允许，基于此原理，可以通过动态创建 script，再请求一个带参网址实现跨域通信。
局限：仅限GET请求
HTML 代码：
<script type="text/javascript"> function onLogin(res){ console.log(res); } </script> //引用文件的方式 <script type="text/javascript" src="https://www.devpoint.cn/login?user=devpoint&callback=onLogin"> //AJAX，以jquery.js <script type="text/javascript"> $.ajax({ url:"https://www.devpoint.cn/login", type:"get", dataType:"jsonp", // 请求方式为jsonp jsonpCallback:"onLogin", // 自定义回调函数名 data:{} }); </script>
服务端代码（PHP）:
echo "onLogin({"result":"success", "user": "devpoint"})"
document.domain + iframe
实现原理：两个页面通过 Javascript 的 document.domain 强制设置为相同主域来达到同域的效果，即相当于 iframe 中的页面为通信代理页面，代理页面必须部署在与后端服务器同源站点下。
局限：仅限主域名一致，子域名不同的跨域。
主页面：（假定访问路径为：https://blog.devpoint.cn/login.html ），代码如下：
<iframe id="proxyIframe" src="https://api.devpoint.cn/proxy.html"></iframe> <script type="text/javascript"> document.domain = "devpoint.cn"; const user = "devpoint"; const elemIframe = document.getElementById("proxyIframe"); elemIframe.login(user,function(res){ console.log(res); }); </script>
代理页面：https://api.devpoint.cn/proxy.html，代码如下：
<script type="text/javascript"> document.domain = "devpoint.cn"; function ajax(data,callback){ //此处实现与真正的后端通信 } function login(user,callback){ ajax(data,callback); } </script>
location.hash + iframe
实现原理： a 欲与 b 跨域通信，通过中间页 c 来实现。
局限：繁琐，且
location.hash传递的值长度有限
三个页面，不同域之间利用 iframe 的 location.hash 传值，相同域之间直接 js 访问来通信。
具体实现：A域：a.html -> B域：b.html -> A域：c.html，a 与 b 不同域通过 hash 值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过 parent.parent 访问a页面所有对象。
a.html（http://www.devpoint.cn/a.html） 代码如下：
<iframe id="iframe" src="http://www.crayon.dev/b.html" style="display:none;"></iframe> <script type="text/javascript"> var iframe = document.getElementById("iframe"); // 向b.html传hash值 setTimeout(function() { iframe.src = iframe.src + "#user=devpoint"; }, 1000); // 开放给同域c.html的回调方法 function onCallback(res) { alert("data from c.html ---> " + res); } </script>
b.html（http://www.crayon.dev/b.html） 代码如下：
<iframe id="iframe" src="http://www.devpoint.cn/c.html" style="display:none;"></iframe> <script type="text/javascript"> var iframe = document.getElementById("iframe"); //监听a.html传来的hash值，再传给c.html window.onhashchange = function () { iframe.src = iframe.src + location.hash; }; </script>
c.html（http://www.devpoint.cn/c.html） 代码如下：
<script type="text/javascript"> // 监听b.html传来的hash值 window.onhashchange = function () { // 再通过操作同域a.html的js回调，将结果传回 window.parent.parent.onCallback("hello: " + location.hash.replace("#user=", "")); }; </script>
postMessage
postMessage 是 HTML5 XMLHttpRequest Level 2 中的API，且是为数不多可以跨域操作的 window 属性之一，它可用于解决以下方面的问题：
- 页面和其打开的新窗口的数据传递
- 多窗口之间消息传递
- 页面与嵌套的
iframe消息传递，包括脱机文件（将HTML跟APP打包一起安装到本地的页面） - 上面三个场景的跨域数据传递
实现原理：postMessage(data,origin) 方法接受两个参数：
data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。origin：协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为/。
CORS
普通跨域请求：服务端设置 Access-Control-Allow-Origin 即可，前端无须设置；
跨域请求要带cookie：前后端都需要设置。
需注意的是：由于同源策略的限制，所读取的 cookie 为跨域请求接口所在域的 cookie，而非当前页。
目前，所有浏览器都支持该功能，CORS 也已经成为主流的跨域解决方案。在项目中的 DEBUG 功能的跨域请求就是使用这个方案。
前端设置：需要在请求头中设置 withCredentials 属性
headers: { "x-fdn-sign": apiSign, withCredentials: "true" }
服务端设置
response.setHeader("Access-Control-Allow-Origin", "*"); // 若有端口需写全（协议+域名+端口） response.setHeader("Access-Control-Allow-Credentials", "true");
总结
虽然现代前端开发很少触及跨域的问题，基本都是借助框架或者脚手架代理，或者 NGINX 代理等等。但作为基础还是有必要了解一下。
