bug-跨域访问问题

web张

已于 2023-11-17 10:32:46 修改

阅读量555

点赞数

文章标签： bug 跨域

于 2023-11-14 18:52:59 首次发布

本文链接：https://blog.csdn.net/weixin_42863883/article/details/134405291

版权

文章讲述了在大屏项目中遇到的跨域问题，通过分析发现自定义header是引发跨域的原因。给出了两种解决方案：前端移除自定义header，以及后端配置Access-Control-Allow-Headers。还介绍了JSONP、CORS、WebSocket等跨域解决方案和Nginx反向代理的原理。

摘要由CSDN通过智能技术生成

问题场景

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

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

使用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

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

跨域是什么

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

跨域方案

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; // 拼接url
  script.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); // 解析url
    let 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");
});

```

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

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

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