跨域产生的原因首先是受浏览器的安全性设计影响，由于浏览器同源策略的设计，所以产生了跨域。
在项目中，我们常常遇到跨域的问题，虽然在你的项目里，脚手架已经100%做好了本地代理、或者运维老铁在nginx中也已经给你做了接口代理，所以你遇到跨域的概率会少了很多，但是在传统的项目中，在那个jquery的横行时代，或者你接手了一个祖传项目时，跨域问题会是时有发生，本文只做笔者了解跨域的通用解决方案，希望在实际项目中对你有些思考和帮助。
正文开始...
何为同源
- 协议相同
- 域名相同
- 端口相同
非同源是无法彼此访问cookie,dom操作，ajax、localStorage、indexDB操作
但是非同源可以访问以下一些属性
代码语言：javascript复制window.postMessage();
window.location
window.frames
window.parent
...
对于非同源网站跨域通信，我们可以采用以下几种方案
片段标识符
通过在url上放入#type，利用hashchange事件，获取父页面的相关hash数据
// parent
const type = 'list';
const originUrl = originUrl '#' type;
const iframe = document.getElementById('iframe');
iframe.src = originUrl;
在子iframe中，我们可以监听hashchange事件
// iframe
window.addEventListener('hashchange', (evt) => {
console.log(evt) // 获取片段标识符的相关数据
})
跨文档通信 window.postMessage
子页面可以利用window.postMessage向父页面发送信息，父页面监听message接收子页面发送的消息，通常这种方式在iframe通信中用得比较多，也是跨域通信的一种解决方案
// parent
window.addEventListener('message', (evt) => {
const data = evt.data;
console.log(data)
})
// child
const origin = '*'; // 这里一般是父页面的域名，但是也可以是*
const data = {
text: 'hello, world'
};
window.postMessage(data,origin)
jsonp
利用script标签，向服务端发送一个get请求，url上绑定一个callback=fn,这个fn通常是与后端约束好，fn是客户端执行的函数名。
用一个简单的例子来解释下jsonp
客户端示例
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsonp</title>
</head>
<body>
<h3>jsonp</h3>
<div id="app"></div>
<script>
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.src = 'http://192.168.31.40:8080/api?callback=jsonp';
document.body.appendChild(script);
const renderHtml = ({name, age}, dom) => {
dom.innerHTML = `<div>我的名字 ${name},今年 ${age}岁了</div>`
}
function jsonp(data) {
console.log(data);
const app = document.getElementById('app');
const {name, age} = data;
renderHtml({name, age}, app)
}
</script>
</body>
</html>
服务端示例代码
代码语言：javascript复制// server.js
const http = require('http');
const fs = require('fs');
const path = require('path');
const PORT = '8080';
const server = http.createServer((req, res) => {
res.statusCode = 200;
// console.log(req.url);
res.setHeader('Content-Type', 'text/html');
fs.readFile(path.resolve(__dirname, '../', 'index.html'), (err, data) => {
if (err) {
res.end('404');
return;
}
res.end(data);
});
const data = {
name: 'Maic',
age: Math.floor(Math.random() * 20)
}
if (req.url.includes('/api')) {
res.end(`jsonp(${JSON.stringify(data)})`)
}
});
server.listen(PORT, () => {
console.log('server is start' PORT);
})
注意我们看到有这样的一段判断req.url.includes('/api'),然后我们res.end(jsonp(JSON.stringify(data))),返回的就是jsonp这个回调函数，把数据当形参传给前端，在客户端定义的jsonp方法就能获取对应的数据。
执行node server.js打开http://localhost:8080我们会发现
返回的数据就是jsonp({name: 'xx',age: 'xx'})
我们看下请求头
浏览器会发送一个get请求，所携带的参数就是callback: jsonp,而我们在客户端确实是通过jsonp这个方法拿到对应的数据了。
所以我们可以知道jsonp实际上就是利用一个客户端发送的get请求携带一个后端服务的返回的回调函数,在客户端，我们定义这个回调函数就可以获取后端返回的形参数据了。
从jsonp这种跨域通信来看，其实有也它的缺点和优点
- 缺点
1、它的安全性会有一定风险，因为依赖的结果就是那个回调函数的形参内容，如果被人劫持修改返回数据，那可能会造成安全性问题
2、仅支持get请求，不支持其它http请求方式，我们发现jsonp这种通信就是利用script标签请求了一个url,url上携带了一个可执行的回调函数，进而通过后端给回调函数传递数据的。
3、没有任何状态码，数据丢给客户端，如果有失败情况，不会有像http状态码一样
- 优点
能解决跨域通信问题，兼容性比较好，不受同源策略的影响，对后端来说实现也简单。
在以前比较久远的项目中，你可能是直接使用jquery，jsonp就ok了,大概的代码就是长这样的
$.ajax({
url: 'xxx',
dataType: 'jsonp',
jsonp: 'successCallback',
success: (data) => {
console.log(data)
},
error: (err) => {
console.log(err)
}
})
successCallback这个就是与服务端约束的回调函数，一般与服务端沟通一致就行，那么简单的jsonp就已经完成了,是不是感觉很简单呢？
WebSocket
由于WebSocket不受同源策略的限制，因此WebSocket也是可以实现跨域通信的。这里就不举例子了，具体可以参考之前写的一篇浅谈websocket这篇文章
CORS跨域资源分享
这种方式是在服务端进行控制，允许任何资源请求。其实在浏览器端，即使跨域，还是会正常请求，只是请求非同源环境的后端服务，浏览器禁止请求访问,更多可以参考这篇文章cors[1]
我们写个例子具体测试一下,在客户端加入这段代码
代码语言：javascript复制 const send = document.getElementById('send');
send.onclick = function () {
if (!window.fetch) {
return;
}
fetch('http://localhost:8081/list.json')
.then((res) => res.json())
.then((result) => {
console.log(result);
const contentDom = document.querySelector('.content');
renderHtml(result, contentDom);
});
};
服务端代码，我们新建一个index2.js服务端代码,并执行node index2.js
const http = require('http');
const PORT = '8081';
const server = http.createServer((req, res) => {
res.statusCode = 200;
// // console.log(req.url);
res.setHeader('Content-Type', 'application/json');
if (req.url.includes('/list.json')) {
res.end(JSON.stringify({
name: 'maic',
age: Math.ceil(Math.random() * 20)
}));
}
});
server.listen(PORT, () => {
console.log('server is start' PORT);
})
我们注意到请求的端口是8081,打开8080页面
点击按钮，发送fetch请求，我们发现浏览器报了这样你常常看到的跨域信息as been blocked by CORS policy: No 'Access-Control-Allow-Origin' header...,因为跨域了
紧接着我们在服务端设置下Access-Control-Allow-Origin: *
const http = require('http');
const PORT = '8081';
const server = http.createServer((req, res) => {
res.statusCode = 200;
// // console.log(req.url);
res.setHeader('Content-Type', 'application/json');
res.setHeader('Access-Control-Allow-Origin', '*');
if (req.url.includes('/list.json')) {
res.end(JSON.stringify({
name: 'maic',
age: Math.ceil(Math.random() * 20)
}));
}
});
server.listen(PORT, () => {
console.log('server is start' PORT);
})
此时再次访问时，已经ok了
注意我们可以看下Response Headers
HTTP/1.1 200 OK
Content-Type: application/json
Access-Control-Allow-Origin: *
Date: Sun, 01 May 2022 14:23:59 GMT
Connection: keep-alive
Content-Length: 24
Access-Control-Allow-Origin:*这是我们服务的设置响应请求头，设置允许所有域名请求。
因此cors跨域其实在服务端设置Access-Control-Allow-Origin：*也就完美的解决了跨域问题。
总结
- 跨域产生的原因，主要受同源策略的影响，非同源环境，无法相互访问
cookie、localStorage、dom操作等 - 解决跨域的方案主要有
片段标识符、iframe通信postMessage,jsonp、WebSocket、cors - 用具体实际例子深入了解几种跨域模式，比如
jsonp,实际上是利用script发送一个get请求，在get请求的参数中传入一个可执行的回调函数，服务根据请求，将返回一个前端可执行的回调函数，并且将数据当成该回调函数的形参，在前端定义该回调函数，从而获取调函数传入的数据。 - 用具体例子服务端设置
cors,主要是在后端接口返回响应头里设置Access-Control-Allow-Origin:*允许所有不同源网站访问，这种方法也是比较粗暴的解决跨域问题的常用手段。 - 本文示例代码code example[2]
参考资料
[1]cors: https://www.wangdoc.com/javascript/bom/cors.html
[2]code example: https://github.com/maicFir/lessonNote/tree/master/node/jsonp
