前端跨域解决方案总结

2019-04-03 本文已影响8人一包

参考：https://segmentfault.com/a/1190000011145364

简单的跨域请求jsonp即可，复杂的cors，窗口之间JS跨域postMessage，开发环境下接口跨域用nginx反向代理或node中间件比较方便

同源策略

同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源
如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击
同源策略限制：
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 和 Js对象无法获得
- AJAX 请求不能发送
跨域限制访问，其实是浏览器的限制，其实请求有发出去，对方服务器也有响应，只不过是被浏览器的同源策略拦下来

跨域解决方法

1. jsonp跨域

利用script可以跨域的特性，缺点是只能实现get请求
应用场景：为了减轻web服务器的负载，我们把js，css，图片等静态资源分离到另一台独立域名的服务器上，在html页面中跨域请求资源。

<script>
    var script=document.createElement("script");
    script.type="text/javascript";
    //传参并指定回调函数为onblack
     script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
     document.head.append(script);
     //回调函数
     function onBack(res) {
        alert(JSON.stringify(res));
    }
</script>

onBack({"status": true, "user": "admin"})

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "onBack",    // 自定义回调函数名
    data: {}
});

jsonpCallback：这个参数用来指定上面那个参数对应的回调函数名，如果不指定，jQuery会自动生成一个随机的函数名

2. 跨域资源共享（CORS）

cros支持所有形式的http请求
普通跨域：只需要服务器端设置Access-Control-Allow-Origin即可，前端无需设置
带cookie请求的跨域（简单请求）：前端设置withCredentials属性为true，服务器端响应必须携带Access-Control-Allow-Credentials：true的首部，而且服务器的Access-Control-Allow-Origin不能设置为*，而必须设置允许跨域访问的域名；
- 同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

非简单请求
- 非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。
- 非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。
- 浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错

简单请求，满足：
- 1. 请求方法是以下三种方法之一：
  - HEAD
  - GET
  - POST
- （2）HTTP的头信息不超出以下几种字段：
  - Accept
  - Accept-Language
  - Content-Language
  - Last-Event-ID
  - Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

3. nginx反向代理

原理：同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题
通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录
配置：
- 找到nginx的配置文件"nginx.conf"

4. WebSocket协议跨域

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。

5. document.domain + iframe跨域

只限于主域相同，子域不同的跨域应用场景
两个页面都通过js强制设置document.domain为基础主域，就实现了同域

父窗口：(http://www.domain.com/a.html)

<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>

子窗口：(http://child.domain.com/b.html)，通过window.parent获取变量

<script>
    document.domain = 'domain.com';
    // 获取父窗口中变量
    alert('get js data from parent ---> ' + window.parent.user);
</script>

6. postMessage跨域

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

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

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

a.html：(http://www.domain1.com/a.html)
<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.html：(http://www.domain2.com/b.html)
<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>

7. window.name

window对象有一个name属性，该属性有一个特征：即在一个窗口的生命周期内，窗口载入的所有的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久的存在于一个窗口载入的所有页面中的，并不会因为新的页面的载入而被重置。

前端跨域解决方案总结

同源策略

跨域解决方法

1. jsonp跨域

2. 跨域资源共享（CORS）

3. nginx反向代理

4. WebSocket协议跨域

5. document.domain + iframe跨域

6. postMessage跨域

7. window.name

猜你喜欢

热点阅读