bug-跨域访问问题

问题场景

1. 自定义 header，导致跨域问题
   一个大屏项目，设置请求接口获取数据时，有的接口能够正常返回数据，有的接口提示跨域（接口域名不同），后端也进行支持跨域设置，结果还是提示跨域；
   通过测试发现，使用Axios直接请求，没有产生跨域，对比代码发现，请求拦截器添加了一个自定义header，去掉就正常了；
   问题原因是自定义header，后端配置应该也有问题导致的
   该问题是使用方式一处理的

• 方式一：前端处理，去掉自定义 header；
• 方式二：后端处理，Access—Control-Allow-Headers 配置中添加自定义 header，或改成*

2. 使用chrome访问本地地址是提示跨域
   2.1 控制台报错： The request client is not a secure context and the resource is in more-private address space private

• 方式一：使用火狐浏览器
• 方式二：配置chrome
  在地址栏中输入chrome://flags/，
  找到 Block insecure private network requests.选项设置为Disabled，
  找到 Insecure origins treated as secure 选项设置为 Enabled，同时设置访问地址（如：http://192.169.16.200:8088）

2.2 控制台报错：Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
后端设置Access-Control-Allow-Origin

总结---------------------------------------------------------------------------------------------------------------

跨域是什么

是浏览器本身的安全策略产生的问题
当访问网页的域与页面内调用接口的域不一致（域不一致包含协议、域名、端口号不一致），就会产生跨域问题

跨域方案

1. JSONP 方案

利用 <script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP 请求一定需要对方的服务器做支持才可以。

```
// 跨域加载资源标签
<img src=XXX>
<link href=XXX>
<script src=XXX>
``````
<!-- 前端代码 -->
function jsonp(req) {let script = document.createElement("script"); // 创建一个script标签let url = req.url + "?callback=" + req.callback.name; // 拼接urlscript.src = url; // 设置script标签的src属性document.getElementsByTagName("head")[0].appendChild(script); // 将script标签添加到head标签中
}function sayHello(res) {console.log("hello", res.data);
}
jsonp({url: "http://localhost:3000",callback: sayHello
})``````
<!-- 后端代码 -->
const http = require("http");
const urllib = require("url");const port = 3000; // 定义端口const server = http.createServer((req, res) => {let params = urllib.parse(req.url, true); // 解析urllet callback = params.query.callback; // callback是函数名，解析出来if (callback) {let data = { data: "我就是你要的数据" }; // 定义要向前端返回的数据res.end(callback + "(" + JSON.stringify(data) + ")"); // 相应数据，callback(参数)的形式}
})server.listen(port, function () {console.log("jsonp server is on");
});```

2. CORS
   CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。

3. postMessage 与 message 事件
   window 与 iframe 之间通信

   <!-- 通过 postMessage 发送信息到指定位置数据 -->
   otherWindow.postMessage(message, targetOrigin, [transfer]);
   <!-- 通过 message 事件接收数据 -->
   window.addEventListener(“message”, dealMessage, false);
   

4. websocket
   前后端使用 websocket 技术进行数据传递

5. Node 中间件代理（二次跨域）
   实现原理：同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略。

6. Nginx 反向代理
   类似 Node 中间件代理