前端跨域的几种方式

「爱情、让人受尽委屈。」 2023-06-22 14:53 15阅读 0赞

由于同源策略的限制，在前端开发中我们经常会遇到跨域问题。

本文将介绍：

一、什么是同源策略

1.1 定义

1.2 同源策略限制了什么

二、常见的几种跨域方式

2.1 JSONP 跨域

2.2 CORS 跨域资源共享

2.3 Nginx代理

2.4 Node.js中间件代理（本地代理）

2.5 postMessage跨域

2.6 Websocket跨域

2.7 document.domain + iframe

2.8 location.hash + iframe

2.9 window.name + iframe

三、总结

--------------------

## 一、什么是同源策略 ##

### 1.1 定义 ###

**同源策略**是一种约定，是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

例如：

<table> 
 <tbody> 
  <tr> 
   <td style="width:116px;">情况</td> 
   <td style="width:160px;">测试网址1</td> 
   <td style="width:167px;">测试网址2</td> 
   <td style="width:160px;">不同之处</td> 
   <td style="width:124px;">是否同源</td> 
  </tr> 
  <tr> 
   <td style="width:116px;">域名不同</td> 
   <td style="width:160px;">www.tomtom.com</td> 
   <td style="width:167px;">im.tomtom.com</td> 
   <td style="width:160px;">www im</td> 
   <td style="width:124px;">否</td> 
  </tr> 
  <tr> 
   <td style="width:116px;">二级域名不同</td> 
   <td style="width:160px;">www.tomtom.com</td> 
   <td style="width:167px;">www.tom1.com</td> 
   <td style="width:160px;">tomtom tom1</td> 
   <td style="width:124px;">否</td> 
  </tr> 
  <tr> 
   <td style="width:116px;">一级域名不同</td> 
   <td style="width:160px;">www.tomtom.com</td> 
   <td style="width:167px;">www.tomtom.cn</td> 
   <td style="width:160px;">com cn</td> 
   <td style="width:124px;">否</td> 
  </tr> 
  <tr> 
   <td style="width:116px;">端口不同</td> 
   <td style="width:160px;">www.tom.com:80</td> 
   <td style="width:167px;">www.tom.com:8081</td> 
   <td style="width:160px;">:80&nbsp; &nbsp;:8081</td> 
   <td style="width:124px;"> <p>否</p> </td> 
  </tr> 
  <tr> 
   <td style="width:116px;">不同域名指向用一个 ip 地址</td> 
   <td style="width:160px;"> <p>www.tom.com 指向</p> <p>192.168.1.56</p> </td> 
   <td style="width:167px;"> <p>www.tom1.com 指向</p> <p>192.168.1.56</p> </td> 
   <td style="width:160px;"> <p>tom&nbsp; tom1</p> <p>但指向同一个IP地址</p> </td> 
   <td style="width:124px;">否</td> 
  </tr> 
  <tr> 
   <td style="width:116px;">协议不同</td> 
   <td style="width:160px;">http://www.tom.com</td> 
   <td style="width:167px;">https://www.tom.com</td> 
   <td style="width:160px;">http&nbsp; https</td> 
   <td style="width:124px;">否</td> 
  </tr> 
  <tr> 
   <td style="width:116px;">域名、协议、端口均相同</td> 
   <td style="width:160px;">www.tom.com:8081</td> 
   <td style="width:167px;">www.tom.com:8081</td> 
   <td style="width:160px;">无</td> 
   <td style="width:124px;">是</td> 
  </tr> 
 </tbody> 
</table>

### 1.2 同源策略限制了什么 ###

*  不同源的Cookie、SessionStorage、LocalStorage 和 IndexDB 无法互相读取
 *  无法互相获得对方的 dom 和 js 对象
 *  ajax 请求发送失败

## 二、常见的几种跨域方式 ##

### 2.1 JSONP 跨域 ###

**2.1.1 相似情况**

不论是通过<script>的src访问文件，还是img的src访问图片，link的href都没有被同源策略所限制。

打开Chorme的开发者工具访问百度首页，我们可以看到 js 文件的访问、图片的访问都是通过 get 请求的方式去获取的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 1][]

**2.1.2 原理**

**jsonp 的原理**就是利用** `<script>`**标签没有跨域限制，通过** `<script>`**标签src属性，发送**带有callback参数的GET请求**，**服务端将接口返回数据拼凑到callback函数中**，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。

简而言之，整个流程为三步：

*  前端声明一个函数，并将这个函数放在 GET 请求的callback参数中;
 *  服务器通过解析url，将要调用的函数和参数拼接成字符串形式，返回给前端;
 *  前端通过获取服务器响应，调用到响应的声明函数，且由于响应中是函数+参数的形式，故可以正确传递参数;

流程图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 2][]

**2.1.3 实现代码**

请求方式：

// jsonpDemo.html
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>JSONP跨域处理</title>
    	</head>
    	<body>
    	</body>
    	<script type="text/javascript">
    		var script = document.createElement('script');
    		script.type = 'text/javascript'
    		
    		// 通过get方式定义回调函数
    		script.src = 'http://www.crosstest.com:8081/jsonTest?account='188500071111'&pwd='aaabbbcc'&callback=doCallBack';
    		document.head.appendChild(script);
    		
    		// 定义回调函数
    		function doCallBack(res) {
    			alert(JSON.stringify(res))
    		}
    	</script>
    </html>

服务器代码：

// 使用Node.js
    
    router.get('/jsonTest', (req, res) => {
      let data = {
        message: 'test success',
      }
      res.end('doCallBack(' + JSON.stringify(data)+ ')');
    });

axios也提供了便捷使用jsonp的方法：

axios.jsonp('http://www.crosstest.com:8081/jsonTest?', {
        params: {'name': 'xiaoli'},
        jsonp: 'doCallBack'
    }).then((res) => {
        alert(res); 
    })
    
    function doCallBack(res) {
        alert(JSON.stringify(res));
    }

ajax实现

$.ajax({
        url: 'http://www.crosstest.com:8081/jsonTest?',
        type: 'get',
        dataType: 'jsonp',  // 设置数据类型为jsonp
        jsonpCallback: "doCallBack",  // 定义好的需要回调的函数名
        data: {'name':'xiaoli'}
    });
    
    function doCallBack(value) {
        alert(JSON.stringify(value))
    }

## ##

### 2.2 CORS 跨域资源共享 ###

**2.2.1 什么是CORS**

CORS是一个w3c标准,全称是"跨域资源共享"(Cross-origin resource sharing),当一个请求收到同源策略的限制时，CORS允许阅览器向跨源服务器发送XMLHttpRequest请求,从而克服ajax请求只能同源使用的限制。

CORS需要浏览器和服务器同时支持。当前所有主流浏览器都支持该功能，IE浏览器不能低于IE10。

![format_png][]

**2.2.2 CORS的原理**

CORS实际上是浏在浏览器与服务器通信时，通过在HTTP协议头增添一些约定好的字段来实现跨域处理的。

相关文档：[HTTP访问控制(CORS)][HTTP_CORS]

与协议相关的协议头：

![format_png 1][]

**2.2.3 使用方式**

CORS的使用分为简单请求、非简单请求、预检请求

**简单请求：**

*  使用GET、POST、HEAD这三种方法之一
 *  只能使用对CORS安全的首部字段集合内的内容：
 *                ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 3][]
 *  Content-Type值只能使用：text/plain、multipart/form-data、application/x-www-form-urlencoded三者之一

转载：

[https://zhuanlan.zhihu.com/p/29980092][https_zhuanlan.zhihu.com_p_29980092]

### 2.3 Nginx代理 ###

通过请求到Nginx，让Nginx将这个请求发送到真正的服务器

# nginx代理配置
    server {
        listen       8080;
        server_name  www.proTest.com;
    
        location / {
            proxy_pass   http://www.realServer.com:8080;  #反向代理
            index  index.html index.htm;
        }
    }

### 2.4 Node.js中间件代理（本地代理） ###

**2.4.1  原理**

Node中间件的原理和nginx大致相同，通过启用一个代理服务器，前端的请求发送到代理，代理再转发到真正服务器的方式。同时可以通过设置cookieDomainRewrite参数，修改响应头中cookie的域名，实现当前域的cookie写入，可以用于接口的登录认证。

**2.4.2 使用方式**

**非Vue项目：**

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

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

// 中间件代码
    var express = require('express');
    var proxy = require('http-proxy-middleware');
    var app = express();
    
    app.use('/', proxy({
        // 代理跨域目标接口
        target: 'http://www.domain2.com:8080',
        changeOrigin: true,
    
        // 修改响应头信息，实现跨域并允许带cookie
        onProxyRes: function(proxyRes, req, res) {
            res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
            res.header('Access-Control-Allow-Credentials', 'true');
        },
    
        // 修改响应信息中的cookie域名
        cookieDomainRewrite: 'www.domain1.com'  // 可以为false，表示不修改
    }));
    
    app.listen(3000);
    console.log('Proxy server is listen at port 3000...');

**Vue项目：**

非脚手架搭建，则修改webpack.config.js项目。若是直接用脚手架搭建，则修改vue.config.js

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
        }
    }

## ##

### 2.5 postMessage跨域 ###

转载：[http://www.imooc.com/article/291931][http_www.imooc.com_article_291931]

**2.5.1  定义**

postMessage 可以是允许跨域操作的window属性之一，可以用于解决以下问题：

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

**2.5.2 用法**

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

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

## ##

### 2.6 Websocket跨域 ###

**2.6.1  定义**

WebSocket Protocol 是HTML5一种新的协议。不同于Http协议，它实现了浏览器与服务器全双工通信，同时允许跨域通讯，能够支持服务器和客户端双方都主动推送消息给对方。  
原生WebSocket API使用起来不太方便，我们使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容

**2.6.2 使用方式**

前端代码

<div>user input：<input type="text"></div>
    <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
    <script>
    var socket = io('http://www.domain2.com:8080');
    
    // 连接成功处理
    socket.on('connect', function() {
        // 监听服务端消息
        socket.on('message', function(msg) {
            console.log('data from server: ---> ' + msg); 
        });
    
        // 监听服务端关闭
        socket.on('disconnect', function() { 
            console.log('Server socket has closed.'); 
        });
    });
    
    document.getElementsByTagName('input')[0].onblur = function() {
        socket.send(this.value);
    };
    </script>

后台代码：

### 2.7 document.domain + iframe ###

**2.7.1  定义**

该方案适用于：主域相同，子域名不同的情况。对于一些有产品体系的大公司而言，不同的页面可能在不同的服务器上，这些服务器的域名不同，但拥有同样的上级域名。如www.qq.com, im.qq.com, user.qq.com，这些服务器上的页面就可以用domain来实现跨域数据访问

**2.7.2 使用方式**

通过js将两个页面都强制设定同一个基础主域，来实现同域的效果

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

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

## ##

### 2.8 location.hash + iframe ###

**2.8.1  定义**

实现原理： 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页面所有对象。

**2.8.2  实现代码**

// a.html
    <iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
    <script>
        var iframe = document.getElementById('iframe');
    
        // 向b.html传hash值
        setTimeout(function() {
            iframe.src = iframe.src + '#user=admin';
        }, 1000);
        
        // 开放给同域c.html的回调方法
        function onCallback(res) {
            alert('data from c.html ---> ' + res);
        }
    </script>

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

// c.html
    <script>
        // 监听b.html传来的hash值
        window.onhashchange = function () {
            // 再通过操作同域a.html的js回调，将结果传回
            window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
        };
    </script>

### 2.9 window.name + iframe ###

**2.9.1  定义**

window.name可以在不同的页面(甚至不同的域名)加载后依然存在，并且可以支持非常长的name值(2MB)。

**2.9.2 代码实现**

a.html：([http://www.domain1.com/a.html][http_www.domain1.com_a.html])

## 三、总结 ##

<table> 
 <tbody> 
  <tr> 
   <td style="width:186px;">跨域方式</td> 
   <td style="width:208px;">适用场景</td> 
   <td style="width:135px;">优势</td> 
   <td style="width:268px;">劣势</td> 
   <td style="width:68px;">难度</td> 
  </tr> 
  <tr> 
   <td style="width:186px;">JSONP</td> 
   <td style="width:208px;">get请求记载跨域的js、css、img等静态资源</td> 
   <td style="width:135px;">使用简便</td> 
   <td style="width:268px;"> <p>只能使用GET请求</p> <p>需要服务器端专门配合</p> <p>参数暴露在url中，有安全风险</p> </td> 
   <td style="width:68px;">易</td> 
  </tr> 
  <tr> 
   <td style="width:186px;">CORS</td> 
   <td style="width:208px;">适用于做ajax跨域请求时使用</td> 
   <td style="width:135px;">只需要后台设置</td> 
   <td style="width:268px;">需要后台配合</td> 
   <td style="width:68px;">中</td> 
  </tr> 
  <tr> 
   <td style="width:186px;">Nginx代理（推荐）</td> 
   <td style="width:208px;">跨域访问，或ajax跨域请求，是项目开发中常用的跨域处理方式</td> 
   <td style="width:135px;">只需要服务器配置，且配置灵活</td> 
   <td style="width:268px;">需要后台配置</td> 
   <td style="width:68px;">易</td> 
  </tr> 
  <tr> 
   <td style="width:186px;">Node.js中间件</td> 
   <td style="width:208px;">通过本地代理的方式进行跨域访问，一般是本地开发过程中使用</td> 
   <td style="width:135px;">配置简单</td> 
   <td style="width:268px;">正式上线时，依旧需要用其他的</td> 
   <td style="width:68px;">易</td> 
  </tr> 
  <tr> 
   <td style="width:186px;">postMessage</td> 
   <td style="width:208px;">多个浏览器窗口之间数据通信</td> 
   <td style="width:135px;">使用简单</td> 
   <td style="width:268px;"> <p>不可能消息会被其他接收到</p> <p>可能其他窗口会接收不到这个消息</p> </td> 
   <td style="width:68px;">易</td> 
  </tr> 
  <tr> 
   <td style="width:186px;">websocket</td> 
   <td style="width:208px;">全双工通信，适用于双方通信频繁的情况</td> 
   <td style="width:135px;">建立长连接，双方可以互相主动推送消息</td> 
   <td style="width:268px;">内存占用高</td> 
   <td style="width:68px;">中</td> 
  </tr> 
  <tr> 
   <td style="width:186px;">document.domain + iframe</td> 
   <td style="width:208px;">适用于主域名相同，子域名不同的情况</td> 
   <td style="width:135px;">主域名相同时，使用简便</td> 
   <td style="width:268px;">限制大</td> 
   <td style="width:68px;">易</td> 
  </tr> 
  <tr> 
   <td style="width:186px;">loaciton.href + iframe</td> 
   <td style="width:208px;">...</td> 
   <td style="width:135px;">...</td> 
   <td style="width:268px;">操作麻烦</td> 
   <td style="width:68px;">中</td> 
  </tr> 
  <tr> 
   <td style="width:186px;">window.name + iframe</td> 
   <td style="width:208px;">跨域获取数据</td> 
   <td style="width:135px;">安全性高</td> 
   <td style="width:268px;">需要中间页面</td> 
   <td style="width:68px;">中</td> 
  </tr> 
 </tbody> 
</table>

参考链接：

感谢作者的无私分享

[https://zhuanlan.zhihu.com/p/29980092][https_zhuanlan.zhihu.com_p_29980092]

[http://www.imooc.com/article/291931][http_www.imooc.com_article_291931]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191216231322755.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019121623144261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191216235248800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTIwMTk0Mi8yMDE4MDQvMTIwMTk0Mi0yMDE4MDQxMzE2MTUzOTAyOC0xNDI0ODc3MDAwLnBuZw?x-oss-process=image/format,png
[HTTP_CORS]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi0wNWFkOGFhZmNiYzk2ZTU2MjI4NzIxMTc3NDYxYzhlMV9oZC5qcGc?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191217002909564.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDE2MzMx,size_16,color_FFFFFF,t_70
[https_zhuanlan.zhihu.com_p_29980092]: https://zhuanlan.zhihu.com/p/29980092
[http_www.imooc.com_article_291931]: http://www.imooc.com/article/291931
[http_www.domain1.com_a.html]: http://www.domain1.com/a.html