跨域问题的多种解决方案
1. jsonp
原理：script标签不受同源策略的影响，把链接挂在script标签上，通过回调函数传递数据
优点：兼容性好，前后端分离
缺点：仅支持get请求，安全性较差，容易引发xss攻击
/* server.js */
const express = require('express');
const app = express();
app.get('/say', (req, res) => {
let { wd, cb } = req.query;
console.log('客户端：' + wd);//客户端：Hello
res.end(`${cb}('服务端：Hi')`)
})
app.listen(3333, () => {
console.log("Server start http://localhost:3333");
})
<script>
function jsonp({ url, params, cb }) {
/* 返回一个Promise */
return new Promise((resolve) => {
/* 创建script */
let script = document.createElement('script');
/* 全局cb函数 */
window[cb] = function (data) {
resolve(data);/* 执行返回的数据 */
document.body.remove(script);/* 执行完毕删除标签 */
}
/* 转换url */
let arr = [];
params = { ...params, cb };
for (let key in params)
arr.push(`${key}=${params[key]}`);
//http://localhost:3333/say?wd=Hello&cb=show
script.src = `${url}?${arr.join('&')}`;
document.body.appendChild(script);
})
}
jsonp({
url: 'http://localhost:3333/say',
params: { wd: 'Hello' },
cb: 'show'
}).then(data => console.log(data));//服务端：Hi
</script>
2. CORS
原理：通过在服务端添加白名单，放宽对请求源的限制，从而实现跨域
优点：可以发任意请求
缺点：上是复杂请求的时候得先做一个预检，再发真实的请求，发了两次请求会有性能上的损耗。
3333端口下的indexhtml发出ajax请求
<!-- html在3333端口服务器上 -->
<script>
let xhr = new XMLHttpRequest;
/* 设置cookie 需要Access-Control-Allow-Credential设置 */
document.cookie = "name=aeipyuan";
xhr.withCredentials = true;
/* 请求4444端口数据 */
xhr.open('put', 'http://localhost:4444/getData', true);
/* 需要设置Access-Control-Allow-Headers */
xhr.setRequestHeader('name', 'A');
xhr.send();
xhr.onreadystatechange = function (e) {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
console.log(xhr.response);//4444已收到
// 需要设置Access-Control-Expose-Headers
console.log(xhr.getResponseHeader('name'));//mike
}
}
}
</script>
4444端口服务器对数据进行处理
const express = require('express');
const app = express();
/* 设置白名单 */
let writeList = ['http://localhost:3333'];
app.use((req, res, next) => {
/* 获取请求源 */
let { origin } = req.headers;
/* 判断请求源 */
if (writeList.includes(origin)) {
/* 允许origin访问 */
res.setHeader('Access-Control-Allow-Origin', origin)
/* 允许哪个头 */
res.setHeader('Access-Control-Allow-Headers', 'name')
/* 允许哪个方法 */
res.setHeader('Access-Control-Allow-Methods', 'PUT')
/* 允许携带cookie */
res.setHeader('Access-Control-Allow-Credentials', true)
/* 预检的存活时间 */
res.setHeader('Access-Control-Allow-Max-Age', 6)
/* 允许前端获取哪个头 */
res.setHeader('Access-Control-Expose-Headers', 'name')
/* OPTIONS请求不做处理 */
if (req.method === 'OPTIONS') {
res.end();
}
}
next();
})
app.put('/getData', (req, res) => {
console.log(req.headers);
res.setHeader('name', 'B');
res.send('4444已收到');
})
app.listen(4444, () => {
console.log("Server start http://localhost:4444");
})
3. postMessage实现跨域
原理:将另一个域的网页放到iframe中，利用postMessage进行传值
3333端口下的a.html
<div>AAAAAAA</div>
<iframe id="frame" src="http://localhost:4444/b.html" frameborder="0" onload="load()"></iframe>
<script>
function load() {
frame.contentWindow.postMessage(
'Hello', 'http://localhost:4444/b.html'
)
}
window.onmessage = function (e) {
console.log('B说：' + e.data);//B说：Hi
}
</script>
4444端口下的b.html
<div>BBBBBB</div>
<script>
window.onmessage = function (e) {
console.log('A说：' + e.data);//A说：Hello
e.source.postMessage('Hi', e.origin);//给A发送消息
}
</script>
4. window.name传值
原理：先用iframe的window.name存储跨域页面要传入的数据，然后将iframe的src属性改变为同源src，实现获取name存储的值
举例：
A,B页面在3333端口下，C页面在4444端口下，目标是实现a页面获取c页面数据
第一步，A页面用iframe标签引入C页面
第二步，C页面设置window.name=数据
第三步，将iframe的src由C页面切换为B页面（同源）
第四步，获取iframe页面的window.name属性
<!-- a.html -->
<iframe src="http://localhost:8082/c.html" frameborder="10" onload="load()" id="frame"></iframe>
<script>
let first = true;
function load() {
if (first) {
let frame = document.getElementById('frame');
frame.src = "http://localhost:8081/b.html";//切换src
first = false;
} else {
console.log(frame.contentWindow.name)
}
}
</script>
<!-- c.html -->
<script>
window.onload = function () {
window.name = "传给A的数据"
}
</script>
5. hash传值
原理：和window.name相似，A使用iframe引入C并给C传hash值，C使用iframe引入B并给B传hash值，B和A同源，所以把hash值赋给A，A监听到hash变化输出hash值
<!-- a.html -->
<iframe id="frame" src="http://localhost:4444/c.html#A2C" frameborder="0"></iframe>
<script>
window.onhashchange = function () {
console.log('C传入数据：' + location.hash)//C传入数据：#C2B2A
}
</script>
<!-- b.html -->
<script>
window.parent.parent.location.hash = location.hash;/* 将hash传给A */
</script>
<!-- c.html -->
<script>
console.log('A传入的数据：' + location.hash);//A传入的数据：#A2C
/* 创建iframe */
let iframe = document.createElement('iframe');
iframe.src = "http://localhost:3333/b.html#C2B2A";
document.body.appendChild(iframe);
</script>
6. Websocket
原理：Websocket是HTML5的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了
开启服务
/* server.js */
let WebSocket = require('ws');
/* 创建服务 */
let wss = new WebSocket.Server({ port: 3333 });
wss.on('connection', ws => {
ws.on('message', e => {
console.log(e);//前端数据
ws.send('后台数据');
})
})
传送数据
<script>
let socket = new WebSocket('ws://localhost:3333');
socket.onopen = function () {
socket.send('前端数据');
}
socket.onmessage = ({ data }) => {
console.log(data);//后台数据
}
</script>
7. domain实现跨域
不同的页面可能放在不同的服务器上，这些服务器域名不同，但是拥有相同的上级域名，比如id.qq.com、www.qq.com、user.qzone.qq.com，它们都有公共的上级域名qq.com ，设置页面documen.domain为上级域名即可实现跨域
<!-- http://a.aeipyuan.cn:3333/a.html -->
<div>AAAAA</div>
<iframe id="frame" src="http://b.aeipyuan.cn:4444/b.html" frameborder="0" onload="load()"></iframe>
<script>
document.domain = "aeipyuan.cn";
function load() {
console.log('b页面数据：' + frame.contentWindow.a);//b页面数据：100
}
</script>
<!-- http://b.aeipyuan.cn:4444/b.html -->
<div>BBBBB</div>
<script>
document.domain = "aeipyuan.cn";
window.a = 100;
</script>
8. nginx实现
在conf文件配置以下参数，了解较浅，日后补充
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
return 204;
}
}
9. webpack配置实现跨域
//方式1 webpack.config.js
devServer: {
port: 8081,
contentBase: './build',
hot: true,
proxy: {
'/api': {
target: 'http://localhost:8888',//目标域
pathRewrite: { '/api': '' }/* 路径重写 */
}
}
}
//方式2 server.js 直接在8888端口访问webpack打包文件
let express = require('express');
let app = express();
/* webpack */
let webpack = require('webpack');
let config = require('../webpack.config.js');
let compiler = webpack(config);
//中间件
let middle = require('webpack-dev-middleware');
app.use(middle(compiler));
/* 请求 */
app.get('/user', (req, res) => {
res.json({ name: "aeipyuan" })
})
app.listen(8888);