跨域解决方案(进阶必备知识)

青莲使者
456 阅读6分钟

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战

TIP 👉 去留无意，闲看庭前花开花落；宠辱不惊，漫随天外云卷云舒。

前言

跨域及跨域解决方案也是一个稳定性比较高的考点。关于跨域如何解决这个问题，不同的人有着不同的思路。

跨域

当前端页面与后台运行在不同的服务器时，就必定会出现跨域这一问题.

什么是跨域？

跨域的故事，要从“同源策略”说起了。

这里的源(origin)指的是协议、域名、端口号，同源指的是在url中协议、域名、端口号均相同。那么同源策略是浏览器的一个安全功能，是用于隔离潜在恶意文件的关键安全机制，不同源的脚本在没有明确授权的情况下，不能读写对方资源。当A、B两个网站属于不同域时，来自于A网站页面中的JavaScript代码访问B网站时，浏览器会拒绝该访问。

注意这个“不能读写资源”的含义，它主要限制了以下三个方面：

  • Cookie、LocalStorage 和 IndexDB 无法读取

  • DOM 和 JS 对象无法获取

  • Ajax请求发送不出去

只要协议、域名、端口有任何一个不同，都被当作是不同的域，这就是所谓“跨域”。

虽然同源策略带来了安全上的保证，但是实际业务中，跨域的场景实在太多了。如果仅仅因为跨域就导致资源无法互相读写，那么我们现在看到的许多互联网功能都将原地歇菜。之所以没歇菜，是因为网络策略有其灵活性，我们可以通过一些方式来绕过同源策略、达到通信目的。

跨域的解决方案

1. CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。

它允许浏览器向不同源的服务器，发出XMLHttpRequest请求。虽然需要浏览器和服务器同时支持，但目前来看，除了低版本IE外，基本所有浏览器都支持该功能。

CORS的通信过程，实际上不需要什么代码层面的配合与改动，由浏览器自动实现。

对于开发者来说，CORS通信与同源的通信没有差别，至少代码上是一样的。浏览器一旦发现AJAX请求跨域，就会自动添加一些附加的头信息、追加必要的请求，但用户不会有感觉。

浏览器的行为是通用的、自动化的。因此能否实现 CORS 的关键，其实在于服务器是否对此提供支持。我们下面来理解一下浏览器和服务器在 CORS 上的合作机制：

浏览器会把请求分为简单请求和非简单请求，对于这两种请求，CORS 的处理过程是不同的，我们先来看简单请求：

  • 请求方式为HEAD、POST 或者 GET

  • http头信息不超出以下字段：Accept、Accept-Language 、 Content-Language、 Last-Event-ID、 Content- Type(限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain)

满足这两个条件的，就是简单请求。对于简单请求，对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段：

Origin: http://qinglian.com

Origin字段用来说明，本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。服务器处理的结果，分为两种情况：

  • 不同意：   如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应；浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段，就知道出错了，从而抛出一个错误，被XMLHttpRequest 的 onerror 回调函数捕获。

  • 同意：如果Origin指定的域名在许可范围内，服务器返回的响应，会多出这个关键的头信息字段：

Access-Control-Allow-Origin: http://qinglian.com

这个字段用于说明服务器接纳哪些域名。它的值要么是请求时Origin字段的值，要么是一个*——表示接受任意域名的请求。

复杂请求对应的CORS行为

有一些请求对服务器有着特殊的要求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是 application/json。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

这个preflight的作用在于，确认当前网页所在的域名是否在服务区的许可名单之中、明确可以使用HTTP请求方法和头信息字段。只有在这个请求返回成功的情况下，浏览器才会发出正式的请求。

这样做的目的是为了避免“无用功”。发送正式请求前先“预检”。

注： “预检”请求用的请求方法是OPTIONS

2.Nginx 反向代理

同源策略仅是针对浏览器的安全策略。服务器端调用HTTP接口只是使用HTTP协议，不需要同源策略，也就不存在跨域问题。

实现思路：通过Nginx配置一个代理服务器域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域访问。

nginx具体配置：

server {
    listen       81;
    server_name  www.domain1.com;

    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

3. vue框架的跨域

module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            secure: false,  // 当代理某些https服务报错时用
            cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改
        }],
        noInfo: true
    }
}

4. postMessage跨域

这个API从H5开始支持，通过注册监听信息的Message事件、调用发送信息的postMessage方法，我们可以实现跨窗口通信。

  1. 发送信息的postMessage方法
otherWindow.postMessage(message, targetOrigin, [transfer]);

这里otherWindow是对目标窗口的引用；message是要发送的信息；targetOrigin是限定消息接受范围，一般是字符串或者URI，*意味着不限制

  1. 接受信息的message事件

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

  • 页面和其打开的新窗口的数据传递
  • 多窗口之间消息传递
  • 页面与嵌套的iframe消息传递
  • 上面三个场景的跨域数据传递

用法：postMessage(data,origin)方法接受两个参数：

  • data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
  • origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
var onmessage = function(event) {
    var data = event.data;
    var origin = event.origin;
}

if(typeof window.addEventListener !== 'undefined') {
    window.addEventListener('message', onmessage, false)
} else if(typeof window.attachEvent !== 'undefined') {
    window.addEventListener('onmessage', onmessage)
}

a页面：

<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向domain2传送跨域数据
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
    };

    // 接受domain2返回数据
    window.addEventListener('message', function(e) {
        alert('data from domain2 ---> ' + e.data);
    }, false);
</script>

b页面：

<script>
    // 接收domain1的数据
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;

            // 处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
</script>

关于跨域的解决方案，其实还有很多，比如iframe，反向代理，WebSocket等

avatar
文章
阅读
粉丝