共计 2733 个字符，预计需要花费 7 分钟才能阅读完成。
什么是跨域？
跨域不是问题，是一种平安机制。浏览器有一种策略名为同源策略，同源策略规定了局部申请不能被浏览器所承受。
值得一提的是：同源策略导致的跨域是浏览器单方面回绝响应数据，服务器端是处理完毕并做出了响应的。
什么是同源策略
一个 url 由三局部组成: 协定，域名（ip 地址），端口。
只有当协定，域名，端口都统一的时候，才被称为同源。
而同源策略规定，只有发送申请的那一边和承受申请的那一边处于同源的状况下，浏览器才会承受响应。
举个例子
发送申请地址:http:47.96.127.5:8080/index 承受申请地址:http:47.96.127.5:8081/index // 不同源 端口不同
发送申请地址:http:47.96.127.5:8080/index 承受申请地址:http:47.96.127.6:8080/index // 不同源 ip 不同
发送申请地址:http:47.96.127.5:8080/index 承受申请地址:https:47.96.127.5:8080/index // 不同源 协定不同
发送申请地址:http:47.96.127.5:8080/index 承受申请地址:http:47.96.127.5:8080/login // 同源 协定，端口，ip 都雷同，门路不同无所谓
复制代码
而当咱们的申请不合乎同源策略的时候。往往会呈现以下谬误👇
解决跨域常见的 5 种办法
第一种:JQuery 的 ajax(举荐 JQuery 我的项目中应用)
jq 的 ajax 自带解决跨域的办法。底层原理采纳的 JSONP 的跨域解决方案。如下
function callback(){
console.log("月薪一千五，心比美式苦")}
$.ajax({
url: 'http://www.domain2.com:8080/login',
type: 'get',
dataType: 'jsonp', // 申请形式为 jsonp 设置跨域的重点
jsonpCallback: "callBack", // 回调函数});
复制代码
在 JQ 我的项目中，这是最常见的解决方案。
第二种:script 标签解决跨域 (远古 Web 我的项目中应用)
如果你的我的项目是祖传下来的。没有框架连 JQuery 都没有。没关系，咱们能够尝试应用原生的办法去解决。
原生采纳的是 script 标签能够不受跨域限度的个性来实现跨域。
<script>
// 回调
function callBack(res) {console.log("跨域的回调",res);
// ... 实现你所有操作后记得删除 script↓
document.head.getElementsByClassName("script")[0].remove();}
const scriptDom = document.createElement('script');
scriptDom.type = 'text/javascript';
scriptDom.class = 'script'; // 用于删除
// 传参一个回调函数名给后端，不便后端返回时执行这个在前端定义的回调函数
scriptDom.src = 'http://192.167.0.152:9996/inface?callback=callBack';
document.head.appendChild(script); // 将标签挂载到 dom 上
</script>复制代码
这里须要留神的是，应用完申请之后记得删除 script, 否则会随着申请的变多 script 标签会始终挂载在 DOM 上。
在远古的 web 中，这是一种计划。但当初曾经不必了。
vue/react/jq 等框架性我的项目中不要应用这种办法，不是不行，只是有更好的抉择
第三种: 前端代理解决跨域
每一个框架的代理配置都不太一样。这里仅以我应用的 umi.js(react)为例。
Umi.js 框架会有 config.ts / config.js 文件，文件中会有 proxy 字段、字段按图中配置办法。即可实现跨域
第四种：服务端代理（Nginx 代理）
nginx 代理个别应用在生产环境。是服务端解决跨域的一种计划。
简略配置模板👇
如果监听到申请接口地址是 www.xxx.com/api/page，nginx 就向 http://www.yyy.com:9999/api/page 这个地址发送申请
server {
listen 80;
server_name www.xxx.com;
#判过滤出含有 api 的申请
location /api/ {proxy_pass http://www.yyy.com:9999; #实在服务器的地址}}
复制代码
留神，nginx 配置完代理后须要重启 nginx，nginx 代理是生产环境的罕用计划
第五种: 后盾（逻辑层）增加响应头解决
Access-Control-Allow-Origin 响应头的意思是，平安同行的申请。
举个例子
http://192.168.0.103:8080 向 http://192.168.0.102:8080 发送了申请，后果因为域名不一样，在返回信息的时候因为 IP 地址不统一被拦挡。
然而如果 http://192.168.0.102:8080 在响应头中的 Access-Control-Allow-Origin 字段中携带上属性值 ’http://192.168.0.103:8080′ 如下
// 响应头
Access-Control-Allow-Origin’:’http:/ /192.168.0.103:8080′
复制代码
这就等于通知浏览器，http://192.168.0.102:8080 这个地址是平安的，请不要拦挡。
这样，http://192.168.0.103:8080 就能够承受来自 http://192.168.0.102:8080 返回的信息。
当然，咱们也能够进行所有域名均不拦挡的设置（如下）
// 响应头
// * 代表所有域名均不拦挡
Access-Control-Allow-Origin’:’*’
复制代码
node 案例如下
res.writeHead(200, {
Access-Control-Allow-Origin':'http://192.168.0.103:8080'});
// 或者
res.writeHead(200, {
Access-Control-Allow-Origin':'*'});
复制代码
并不倡议此种计划，因为安全性不高。本人写小练习的时候倡议应用，因为真的很不便。
总结
跨域的常见的五种解决方案如下
jsonp，代表：jquery 的 $.ajax。（仅限 JQuery 我的项目应用）
script 标签解决跨域（远古 web 应用的计划，已不倡议应用）
前端代理
nginx 代理
设置响应头（不倡议应用，安全性不高，小练习能够用用，不便）