前端开发中常见的跨域解决方案汇总

亦凉 2023-07-24 02:43 5阅读 0赞

#### 一、跨域的概念及理解 ####

1.  **跨域**是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。
2.  **广义的跨域**：

*  资源跳转： `A`链接、重定向、表单提交
 *  资源嵌入： `<link>`、`<script>`、`<img>`、`<frame>`等`dom`标签，还有样式中`background:url()`、`@font-face()`等文件外链
 *  脚本请求： `js`发起的`ajax`请求、`dom`和`js`对象的跨域操作等

1.  其实我们通常所说的跨域是狭义的，是由**浏览器同源策略**限制的一类请求场景。
2.  **同源策略**，`SOP（Same origin policy）`是一种约定，由`Netscape`公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到`XSS`、`CSFR`等攻击。所谓**同源**是指`"协议+域名+端口"`三者相同，即便两个不同的域名指向同一个ip地址，也非同源。  
    **同源策略限制以下几种行为**：

*  `Cookie`、`LocalStorage` 和 `IndexDB` 无法读取
 *  `DOM` 和 `Js`对象无法获得
 *  `AJAX` 请求不能发送

1.  **常见跨域场景**

*  URL 说明 是否允许通信
 *  `http://www.domain.com/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` 不同域名 不允许
 *  `http://www.domain.com/lab/c.js`、`http://www.domain.com:8000/a.js`、`http://www.domain.com/b.js`同一域名，不同端口 不允许

1.  **跨域解决方案**

*  通过`jsonp`跨域  
    \+`document.domain + iframe`跨域
 *  `location.hash + iframe`
 *  `window.name + iframe`跨域
 *  `postMessage`跨域
 *  跨域资源共享`（CORS）`
 *  `nginx`代理跨域
 *  `nodejs`中间件代理跨域
 *  `WebSocket`协议跨域

#### 二、 通过jsonp跨域 ####

通常为了减轻`web`服务器的负载，我们把`js`、`css`，`img`等静态资源分离到另一台独立域名的服务器上，在`html`页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建`script`，再请求一个带参网址实现跨域通信。

1.  原生实现：

服务端返回如下（返回时即执行全局函数）：  
`onBack({"status": true, "user": "admin"})`

1.  `jquery ajax`：

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

1.  `vue.js`：

this.$http.jsonp('http://www.domain2.com:8080/login', { 
    	params: { },
    	jsonp: 'onBack'
    }).then((res) => { 
    	console.log(res);
    })

1.  后端`node.js`代码示例：

var querystring = require('querystring');
    var http = require('http');
    var server = http.createServer();
    
    server.on('request', function(req, res) { 
    var params = qs.parse(req.url.split('?')[1]);
    var fn = params.callback;
    
    // jsonp返回设置
    res.writeHead(200, {  'Content-Type': 'text/javascript' });
    res.write(fn + '(' + JSON.stringify(params) + ')');
    
    res.end();
    });
    
    server.listen('8080');
    console.log('Server is running at port 8080...');

**jsonp缺点：只能实现get一种请求**

#### 三、 document.domain + iframe跨域 ####

此方案**仅限主域相同，子域不同的跨域**应用场景。  
**实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域**。

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

1.  子窗口：`(child.domain.com/b.html)`

#### 四、 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：(www.domain1.com/a.html)`

2.`b.html：(www.domain2.com/b.html)`

1.  `c.html：(www.domain1.com/c.html)`

#### 五、 window.name + iframe跨域 ####

`window.name` 属性的独特之处：`name` 值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 `name` 值（2MB）。

1.  `a.html：(www.domain1.com/a.html)`

2.`proxy.html：(www.domain1.com/proxy....`  
中间代理页，与··a.htm··l同域，内容为空即可。

1.  `b.html：(www.domain2.com/b.html)`

**总结**：通过 `iframe`的 `src` 属性由外域转向本地域，跨域数据即由`iframe` 的`window.name` 从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

#### 六、 postMessage跨域 ####

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

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

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

1.  `a.html：(www.domain1.com/a.html)`

1.  `b.html：(www.domain2.com/b.html)`

#### 七、 跨域资源共享（CORS） ####

**普通跨域请求**：只服务端设置`Access-Control-Allow-Origin`即可，前端无须设置。  
**带cookie请求**：前后端都需要设置字段，所带`cookie`为跨域请求接口所在域的`cookie`，而非当前页。  
目前，所有浏览器都支持该功能(`IE8+`：`IE8/9`需要使用`XDomainRequest`对象来支持`CORS`）)，`CORS`也已经成为主流的跨域解决方案。

1.  **前端设置**：

*  原生`ajax`

// 前端设置是否带cookie
    xhr.withCredentials = true;
    示例代码：
    
    var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
    
    // 前端设置是否带cookie
    xhr.withCredentials = true;
    
    xhr.open('post', 'http://www.domain2.com:8080/login', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('user=admin');
    
    xhr.onreadystatechange = function() { 
    	if (xhr.readyState == 4 && xhr.status == 200) { 
    	alert(xhr.responseText);
    	}
    };

\+`jQuery ajax`

$.ajax({ 
    ...
    xhrFields: { 
    	withCredentials: true // 前端设置是否带cookie
    },
    crossDomain: true, // 会让请求头中包含跨域的额外信息，但不会含cookie
    ...
    });

*  `vue`框架在`vue-resource`封装的`ajax`组件中加入以下代码：

Vue.http.options.credentials = true

1.  **服务端设置**：  
    若后端设置成功，前端浏览器控制台则不会出现跨域报错信息，反之，说明没设成功。

*  **Java后台**：

/* * 导入包：import javax.servlet.http.HttpServletResponse; * 接口参数中定义：HttpServletResponse response */
    response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); // 若有端口需写全（协议+域名+端口）
    response.setHeader("Access-Control-Allow-Credentials", "true");

*  **Nodejs后台示例**：

#### 八、 nginx代理跨域 ####

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

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

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

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

*  **nginx具体配置**：

#proxy服务器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;
    	}
    }

*  **前端代码示例**：

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

*  **Nodejs后台示例**：

var http = require('http');
    var server = http.createServer();
    var qs = require('querystring');
    
    server.on('request', function(req, res) { 
    	var params = qs.parse(req.url.substring(2));
    
    	// 向前台写cookie
    	res.writeHead(200, { 
    	'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:脚本无法读取
    	});
    
    	res.write(JSON.stringify(params));
    	res.end();
    });
    
    server.listen('8080');
    console.log('Server is running at port 8080...');

#### 九、 Nodejs中间件代理跨域 ####

`node`中间件实现跨域代理，原理大致与`nginx`相同，都是通过启一个代理服务器，实现数据的转发。

1.  非`vue`框架的跨域（2次跨域）  
    利用`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...');

*  `Nodejs`后台同上面的`nginx`

1.  `vue`框架的跨域（1次跨域）  
    利用`node + webpack + webpack-dev-server`代理接口跨域。在开发环境下，由于`vue`渲染服务和接口代理服务都是`webpack-dev-server`同一个，所以页面与代理接口之间不再跨域，无须设置`headers`跨域信息了。

*  `webpack.config.js`部分配置：

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

#### 十、 WebSocket协议跨域 ####

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

1.  **前端代码**：

<div>user input：<input type="text"></div>
    <script src="./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>

1.  **Nodejs socket后台**：