前端跨域请求方案整理

【这是我参与更文挑战的第 31 天，活动详情查看：更文挑战”】

跨域请求，是前端开发比较常见的问题。通常为了提高的开发效率，项目开发过程中进行前后端分离，各自独立部署，就可能会出现前后端域名不一致，在通讯过程中就会出现跨域的问题。由于项目开发过程中涉及，借此机会对跨域问题进行整理，也是前端面试比较常见的问题。

为什么会有跨域问题？

这个问题是随着 AJAX 的兴起，Web 应用对跨域访问的需求就越来越多，AJAX 在进行跨域请求的时候受到浏览器安全限制。

浏览器出于安全的考虑，引入同源策略。这种策略会对页面上执行的 Javascript 访问资源的时候进行限制，比如不能直接通过 Javascript 访问不同源之下的页面DOM结构，同时在对不同源发送请求时也无法获取到服务器响应内容（服务器会正常处理请求并返回响应内容，但是返回的内容被浏览器拦截掉了）。

什么是同源策略？

同源策略 SOP（Same origin policy）是一种约定，首先由Netscape公司在1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指“协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

同源策略将限制以下几种行为：

Cookie、LocalStorage 和 IndexDB 无法读取
DOM 和 Javascript 对象无法获得
AJAX 请求收到限制

什么是跨域

未标题-1.jpg

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 代理等等。但作为基础还是有必要了解一下。