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 中间件代理

相关推荐
Sc Turing13 小时前
【Vue3-Bug】中路由加载页面直接显示空白
前端·bug
HvrI113 小时前
【Harmony_Bug】forEach + asyncawait 的异步陷阱
开发语言·华为·bug·harmonyos·鸿蒙
shanks6616 小时前
【Bug】 [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed
网络协议·bug·ssl
gxn_mmf1 天前
页面需要重加载才能显示的问题修改
前端·bug
YoungHong19922 天前
Git Bisect 使用指南:高效定位引入 Bug 的提交
git·bug
waves浪游2 天前
自动化测试实战篇
测试用例·bug·测试
DarkAthena3 天前
【ORACLE】记录一些ORACLE的merge into语句的BUG
数据库·oracle·bug
猫猫头有亿点炸4 天前
大数据可能出现的bug之flume
大数据·bug·flume
PLUS_WAVE4 天前
【CUDA 编译 bug】ld: cannot find -lcudart
服务器·c++·bug·环境·编译·cuda·ld
宁酱醇4 天前
各种各样的bug合集
开发语言·笔记·python·gitlab·bug