总结：前端常见的跨域解决方案

时间 2019-11-12

标签总结前端常见的解决方案繁體版

原文原文链接

1、形成跨域的两种策略

　　浏览器的同源策略会致使跨域，这里同源策略又分为如下两种：css

　　DOM同源策略：禁止对不一样源页面DOM进行操做。这里主要场景是iframe跨域的状况，不一样域名的iframe是限制互相访问的。html

　　XmlHttpRequest同源策略：禁止使用XHR对象向不一样源的服务器地址发起HTTP请求。只要协议、域名、端口有任何一个不一样，都被看成是不一样的域，之间的请求就是跨域操做。前端

2、为何要有跨域限制

　　了解完跨域以后，想必你们都会有这么一个思考，为何要有跨域的限制，浏览器这么作是出于何种缘由呢。其实仔细想想就会明白，跨域限制主要是为了安全考虑。vue

　　常见的跨域场景：html5

URL                                      说明 是否容许通讯 http://www.domain.com/a.js http://www.domain.com/b.js 同一域名，不一样文件或路径 容许 http://www.domain.com/lab/c.js  http://www.domain.com:8000/a.js http://www.domain.com/b.js 同一域名，不一样端口 不容许  http://www.domain.com/a.js https://www.domain.com/b.js 同一域名，不一样协议 不容许  http://www.domain.com/a.js http://192.168.4.12/b.js 域名和域名对应相同ip 不容许  http://www.domain.com/a.js http://x.domain.com/b.js 主域相同，子域不一样 不容许 http://domain.com/c.js  http://www.domain1.com/a.js http://www.domain2.com/b.js 不一样域名 不容许

（1）AJAX同源策略主要用来防止CSRF攻击。若是没有AJAX同源策略，至关危险，咱们发起的每一次HTTP请求都会带上请求地址对应的cookie，那么能够作以下攻击：java

　　一、用户登陆了本身的银行页面http://mybank.com，http://mybank.com向用户的cookie中添加用户标识。node

　　二、用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX请求代码。webpack

　　三、http://evil.com向http://mybank.com发起AJAXHTTP请求，请求会默认把http://mybank.com对应cookie也同时发送过去。nginx

　　四、银行页面从发送的cookie中提取用户标识，验证用户无误，response中返回请求数据。此时数据就泄露了。web

　　五、并且因为Ajax在后台执行，用户没法感知这一过程。

（2）DOM同源策略也同样，若是iframe之间能够跨域访问，能够这样攻击：

　　一、作一个假网站，里面用iframe嵌套一个银行网站 http://mybank.com。

　　二、把iframe宽高啥的调整到页面所有，这样用户进来除了域名，别的部分和银行的网站没有任何差异。

　　三、这时若是用户输入帐号密码，咱们的主网站能够跨域访问到http://mybank.com的dom节点，就能够拿到用户的输入了，那么就完成了一次攻击。因此说有了跨域跨域限制以后，咱们才能更安全的上网了。

3、跨域的解决方式

　　(1)跨域资源共享

　　CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。对于这个方式，阮一峰老师总结的文章特别好，但愿深刻了解的能够看一下http://www.ruanyifeng.com/blog/2016/04/cors.html。

　　这里简单的说一说大致流程。

　　一、对于客户端，咱们仍是正常使用xhr对象发送ajax请求。惟一须要注意的是，咱们须要设置咱们的xhr属性withCredentials为true，否则的话，cookie是带不过去的，设置： xhr.withCredentials = true;

　　二、对于服务器端，须要在 response header中设置以下两个字段: Access-Control-Allow-Origin: http://www.yourhost.com Access-Control-Allow-Credentials:true 这样，咱们就能够跨域请求接口了。

　　(2)jsonp实现跨域

　　基本原理就是经过动态建立script标签,而后利用src属性进行跨域。

　　这么说比较模糊，咱们来看个例子:

 1 // 定义一个fun函数
 2 function fun(fata) {
 3     console.log(data);
 4 };
 5 // 建立一个脚本，而且告诉后端回调函数名叫fun
 6 var body = document.getElementsByTagName('body')[0];
 7 var script = document.gerElement('script');
 8 script.type = 'text/javasctipt';
 9 script.src = 'demo.js?callback=fun';
10 body.appendChild(script);

　　返回的js脚本，直接会执行。因此就执行了事先定义好的fun函数了，而且把数据传入了进来。

　　fun({"name": "name"})

　　固然，这个只是一个原理演示，实际状况下，咱们须要动态建立这个fun函数，而且在数据返回的时候销毁它。由于在实际使用的时候，咱们用的各类ajax库，基本都包含了jsonp的封装，不过咱们仍是要知道一下原理，否则就不知道为何jsonp不能发post请求了~

　　(3)document.domain + iframe跨域

　　此方案仅限主域相同，子域不一样的跨域应用场景。

　　实现原理：两个页面都经过js强制设置document.domain为基础主域，就实现了同域。

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

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

　　(2)子窗口：(http://child.domain.com/b.html)

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

　　(4)window.name + iframe跨域

　　window对象拥有name属性，它有一个特色：相同协议下，在一个页面中，不随URL的改变而改变

　　经过window.name实现跨域也很简单，iframe拥有contentWindow属性，其指向该iframe的window对象的引用，若是在iframe的src指向的页面中设置window.name值，那么就能够经过iframe.contentWindow.name就能够拿到这个值了

1 var url = "http://funteas.com/lab/windowName";
2 var iframe = document.createElement('iframe')
3 iframe.onload = function(){
4     var data = iframe.contentWindow.name
5     console.log(data)
6 }
7 iframe.src = url
8 document.body.appendChild(iframe)

　　然而，chrome会提示你跨域了！而咱们已经知道window.name不随URL的改变而改版，即onload时，已经获取到了name，只不过由于不一样源，当前页面的脚本没法拿到iframe.contentWindow.name，此时只须要把iframe.src改成同源便可

1 var url = "http://funteas.com/lab/windowName";
2 var iframe = document.createElement('iframe')
3 iframe.onload = function(){
4     iframe.src = 'favicon.ico';
5     var data = iframe.contentWindow.name
6     console.log(data)
7 }
8 iframe.src = url
9 document.body.appendChild(iframe)

　　(5)location.hash + iframe跨域

　　实现原理： a欲与b跨域相互通讯，经过中间页c来实现。三个页面，不一样域之间利用iframe的location.hash传值，相同域之间直接js访问来通讯。

　　具体实现：A域：a.html -> B域：b.html -> A域：c.html，a与b不一样域只能经过hash值单向通讯，b与c也不一样域也只能单向通讯，但c与a同域，因此c可经过parent.parent访问a页面全部对象。

　　(1)a.html：(http://www.domain1.com/a.html)

 1 <iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
 2 <script>
 3     var iframe = document.getElementById('iframe');
 4 
 5     // 向b.html传hash值
 6     setTimeout(function() {
 7         iframe.src = iframe.src + '#user=admin';
 8     }, 1000);
 9 
10     // 开放给同域c.html的回调方法
11     function onCallback(res) {
12         alert('data from c.html ---> ' + res);
13     }
14 </script>

　　(2)b.html：(http://www.domain2.com/b.html)

1 <iframe id="iframe" src="http://www.domain1.com/c.html" style="display:none;"></iframe>
2 <script>
3     var iframe = document.getElementById('iframe');
4 
5     // 监听a.html传来的hash值，再传给c.html
6     window.onhashchange = function () {
7         iframe.src = iframe.src + location.hash;
8     };
9 </script>

　　(3)c.html：(http://www.domain1.com/c.html)

1 <script>
2     // 监听b.html传来的hash值
3     window.onhashchange = function () {
4         // 再经过操做同域a.html的js回调，将结果传回
5         window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
6     };
7 </script>

　　(6)postMessage跨域

　　postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数很少能够跨域操做的window属性之一，它可用于解决如下方面的问题：

　　(a)页面和其打开的新窗口的数据传递(b)多窗口之间消息传递(c)页面与嵌套的iframe消息传递

　　用法：otherWindow.postMessage(message,targetOrigin);

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

　　data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，因此传参时最好用JSON.stringify()序列化。

　　origin：协议+主机+端口号，也能够设置为"*"，表示能够传递给任意窗口，若是要指定和当前窗口同源的话设置为"/"。

　　(1)a.html：(http://www.domain1.com/a.html))

 1 <iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
 2 <script>       
 3     var iframe = document.getElementById('iframe');
 4     iframe.onload = function() {
 5         var data = {
 6             name: 'aym'
 7         };
 8         // 向domain2传送跨域数据
 9         iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
10     };
11 
12     // 接受domain2返回数据
13     window.addEventListener('message', function(e) {
14         alert('data from domain2 ---> ' + e.data);
15     }, false);
16 </script>

　　(2)b.html：(http://www.domain2.com/b.html)

 1 <script>
 2     // 接收domain1的数据
 3     window.addEventListener('message', function(e) {
 4         alert('data from domain1 ---> ' + e.data);
 5 
 6         var data = JSON.parse(e.data);
 7         if (data) {
 8             data.number = 16;
 9 
10             // 处理后再发回domain1
11             window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
12         }
13     }, false);
14 </script>

(7)WebSocket协议跨域

　　WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通讯，同时容许跨域通信，是server push技术的一种很好的实现。原生WebSocket API使用起来不太方便，咱们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

　　(1)前端代码

 1 <div>user input：<input type="text"></div>
 2 <script src="./socket.io.js"></script>
 3 <script>
 4 var socket = io('http://www.domain2.com:8080');
 5 
 6 // 链接成功处理
 7 socket.on('connect', function() {
 8     // 监听服务端消息
 9     socket.on('message', function(msg) {
10         console.log('data from server: ---> ' + msg); 
11     });
12 
13     // 监听服务端关闭
14     socket.on('disconnect', function() { 
15         console.log('Server socket has closed.'); 
16     });
17 });
18 
19 document.getElementsByTagName('input')[0].onblur = function() {
20     socket.send(this.value);
21 };
22 </script>

　　(2)Nodejs socket后台

 1 var http = require('http');
 2 var socket = require('socket.io');
 3 
 4 // 启http服务
 5 var server = http.createServer(function(req, res) {
 6     res.writeHead(200, {
 7         'Content-type': 'text/html'
 8     });
 9     res.end();
10 });
11 
12 server.listen('8080');
13 console.log('Server is running at port 8080...');
14 
15 // 监听socket链接
16 socket.listen(server).on('connection', function(client) {
17     // 接收信息
18     client.on('message', function(msg) {
19         client.send('hello：' + msg);
20         console.log('data from client: ---> ' + msg);
21     });
22 
23     // 断开处理
24     client.on('disconnect', function() {
25         console.log('Client socket has closed.'); 
26     });
27 });

　　(8)nginx代理跨域

　　一、nginx配置解决iconfont跨域

　　浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件(eot|otf|ttf|woff|svg)例外，此时可在nginx的静态资源服务器中加入如下配置。　

1 location / {
2   　　add_header Access-Control-Allow-Origin *;
3 　　}

　　二、nginx反向代理接口跨域

　　跨域原理：同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不须要同源策略，也就不存在跨越问题。

　　实现思路：经过nginx配置一个代理服务器（域名与domain1相同，端口不一样）作跳板机，反向代理访问domain2接口，而且能够顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登陆。

　　nginx具体配置：

 1 #proxy服务器
 2 server {
 3     listen       81;
 4     server_name  www.domain1.com;
 5 
 6     location / {
 7         proxy_pass   http://www.domain2.com:8080;  #反向代理
 8         proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
 9         index  index.html index.htm;
10 
11         # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
12         add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
13         add_header Access-Control-Allow-Credentials true;
14     }
15 }

　　(1)前端代码示例：

1 var xhr = new XMLHttpRequest();
2 
3 // 前端开关：浏览器是否读写cookie
4 xhr.withCredentials = true;
5 
6 // 访问nginx中的代理服务器
7 xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
8 xhr.send();

　　(2)Nodejs后台示例：

 1 var http = require('http');
 2 var server = http.createServer();
 3 var qs = require('querystring');
 4 
 5 server.on('request', function(req, res) {
 6     var params = qs.parse(req.url.substring(2));
 7 
 8     // 向前台写cookie
 9     res.writeHead(200, {
10         'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'   // HttpOnly:脚本没法读取
11     });
12 
13     res.write(JSON.stringify(params));
14     res.end();
15 });
16 
17 server.listen('8080');
18 console.log('Server is running at port 8080...');

(9)Nodejs中间件代理跨域

　　node中间件实现跨域代理，原理大体与nginx相同，都是经过启一个代理服务器，实现数据的转发，也能够经过设置cookieDomainRewrite参数修改响应头中cookie中域名，实现当前域的cookie写入，方便接口登陆认证。

　　一、非vue框架的跨域（2次跨域）

　　利用node + express + http-proxy-middleware搭建一个proxy服务器。

　　(1)前端代码示例：

1 var xhr = new XMLHttpRequest();
2 
3 // 前端开关：浏览器是否读写cookie
4 xhr.withCredentials = true;
5 
6 // 访问http-proxy-middleware代理服务器
7 xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
8 xhr.send();

　　(2)中间件服务器：

 1 var express = require('express');
 2 var proxy = require('http-proxy-middleware');
 3 var app = express();
 4 
 5 app.use('/', proxy({
 6     // 代理跨域目标接口
 7     target: 'http://www.domain2.com:8080',
 8     changeOrigin: true,
 9 
10     // 修改响应头信息，实现跨域并容许带cookie
11     onProxyRes: function(proxyRes, req, res) {
12         res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
13         res.header('Access-Control-Allow-Credentials', 'true');
14     },
15 
16     // 修改响应信息中的cookie域名
17     cookieDomainRewrite: 'www.domain1.com'  // 能够为false，表示不修改
18 }));
19 
20 app.listen(3000);
21 console.log('Proxy server is listen at port 3000...');

　　(3)Nodejs后台示例:同nginx中

　　二、 vue框架的跨域（1次跨域）

　　利用node + webpack + webpack-dev-server代理接口跨域。在开发环境下，因为vue渲染服务和接口代理服务都是webpack-dev-server同一个，因此页面与代理接口之间再也不跨域，无须设置headers跨域信息了。

　　webpack.config.js部分配置：

 1 module.exports = {
 2     entry: {},
 3     module: {},
 4     ...
 5     devServer: {
 6         historyApiFallback: true,
 7         proxy: [{
 8             context: '/login',
 9             target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
10             changeOrigin: true,
11             cookieDomainRewrite: 'www.domain1.com'  // 能够为false，表示不修改
12         }],
13         noInfo: true
14     }
15 }

　　总结：以上跨域详解摘自不一样的专栏整理而成，实际状况下，通常用cors，jsonp等常见方法就能够了。不过遇到了一些很是规状况，咱们仍是须要知道有更多的方法能够选择的。