bug-跨域访问问题

问题场景

  1. 自定义 header,导致跨域问题
    一个大屏项目,设置请求接口获取数据时,有的接口能够正常返回数据,有的接口提示跨域(接口域名不同),后端也进行支持跨域设置,结果还是提示跨域;
    通过测试发现,使用Axios直接请求,没有产生跨域,对比代码发现,请求拦截器添加了一个自定义header,去掉就正常了;
    问题原因是自定义header,后端配置应该也有问题导致的
    该问题是使用方式一处理的
  • 方式一:前端处理,去掉自定义 header;
  • 方式二:后端处理,Access---Control-Allow-Headers 配置中添加自定义 header,或改成*
  1. 使用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; // 拼接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");
});

```
  1. CORS

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

  2. postMessage 与 message 事件

    window 与 iframe 之间通信

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

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

  4. Node 中间件代理(二次跨域)

    实现原理:同源策略是浏览器需要遵循的标准,而如果是服务器向服务器请求就无需遵循同源策略。

  5. Nginx 反向代理

    类似 Node 中间件代理

相关推荐
越学不动啦2 天前
四、Bug篇+用例篇
软件测试·测试用例·bug·软件工程·测试基础
有时间要学习2 天前
Test——BUG篇
bug·测试
猫猫头有亿点炸3 天前
电脑连不上手机热点会出现的小bug
bug
不想加班的码小牛4 天前
第4期:重构软件测试体系——生成式AI如何让BUG无所遁形
人工智能·重构·bug·集成测试
limanjihe4 天前
PrimeTime生成.lib竟暗藏PG添加Bug
bug
Java手札7 天前
【bug】Cannot connect to already running IDE instance.SocketTimeoutException
ide·bug
妄想出头的工业炼药师7 天前
pcl 1.14.1 vs2022 Eigen::internal::aligned_free bug
bug
小海海不怕困难7 天前
xxljob阻塞处理策略设置为单机串行导致的bug
bug
Littlehero_1217 天前
关于bug总结记录
bug
冲上云霄的Jayden7 天前
Paddlex服务化代理处理跨域、替换Response中Json key
json·fastapi·代理·跨域·uvicorn·paddlex·服务化