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; // 拼接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");
});```
  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 中间件代理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/146336.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OpenCV快速入门:初探

文章目录 一、什么是OpenCV二、安装OpenCV三、图像读取与显示读取图像显示图像等待按键与关闭窗口 四、视频加载与摄像头调用从视频文件中读取从摄像头中读取关闭窗口与释放资源 五、图像的基本存储方式RGB矩阵矩阵操作与像素访问使用矩阵来显示图像 六、图像保存读取图像保存图…

java接收前端easyui datagrid传递的数组参数

这篇文章分享一下怎么在easyui的datagrid刷新表格时&#xff0c;在后端java代码中接收datagrid传递的数组参数。 数组来源于技能的tagbox&#xff08;标签框&#xff09;&#xff0c;tagbox和combobox的区别是tagbox可以选择多项。 标签框渲染的代码为 $("#skill_ids"…

wpf devexpress Property Gird管理集合属性

Property Grid允许你添加&#xff0c;浏览和编辑集合属性

golang标准库-crc32的使用

1.概述 crc32实现了32位循环冗余检测算法的实现。目前crc32内部提供 了三种常用的多项式,采用查表法来提高计算checksum的效率。通过crc32.MakeTable()可以获取对应的表&#xff0c;crc32提供了一个IEETABLE可以直接使用&#xff0c;官方链接如下&#xff1a;crc32 package - h…

Windows Server2012 R2修复SSL/TLS漏洞(CVE-2016-2183)

漏洞描述 CVE-2016-2183 是一个TLS加密套件缺陷&#xff0c;存在于OpenSSL库中。该缺陷在于使用了弱随机数生成器&#xff0c;攻击者可以利用此缺陷预测随机数的值&#xff0c;从而成功绕过SSL/TLS连接的加密措施&#xff0c;实现中间人攻击。这个漏洞影响了OpenSSL 1.0.2版本…

免费开源的区域屏幕录制(gif转换)工具(支持编辑功能)

软件优点&#xff1a;区域截屏&#xff0c;直接转换为gif即刻分享&#xff0c;免费开源&#xff0c;支持编辑功能 它可以让你轻松地录制屏幕&#xff0c;摄像头或画板的动画&#xff0c;并编辑、保存为 GIF&#xff0c;视频或其他格式。 下载并安装 ScreenToGif 首先&#xf…

js: less-vars-to-js将 LESS 变量转换为 JavaScript 对象

less-vars-to-js 是一个用于将 LESS 变量转换为 JavaScript 对象的工具。它可以帮助你在使用 LESS 编写样式的同时&#xff0c;可以方便地在 JavaScript 代码中使用这些变量。 文档 https://www.npmjs.com/package/less-vars-to-js 安装 npm install less-vars-to-js -D参数…

CentOS中安装常用环境

一、CentOS安装 redis ①&#xff1a;更新yum sudo yum update②&#xff1a;安装 EPEL 存储库 Redis 通常位于 EPEL 存储库中。运行以下命令安装 EPEL 存储库 sudo yum install epel-release③&#xff1a;安装 Redis sudo yum install redis④&#xff1a;启动 Redis 服…

【微软技术栈】C#.NET 异步文件 I/O

异步操作使您能在不阻塞主线程的情况下执行占用大量资源的 I/O 操作。 在 Windows 8.x 应用商店应用或桌面应用中一个耗时的流操作可能阻塞 UI 线程并让应用看起来好像不工作时&#xff0c;这种性能的考虑就显得尤为重要了。 从 .NET Framework 4.5 开始&#xff0c;I/O 类型包…

加密数字货币:机遇与风险并存

随着区块链技术的发展和普及&#xff0c;加密数字货币逐渐走入人们的视线。作为一种以数字形式存在的资产&#xff0c;加密数字货币具有去中心化、匿名性和安全性高等特点&#xff0c;为人们提供了一种全新的支付方式和投资选择。然而&#xff0c;加密数字货币市场也存在着较高…

编译智能合约以及前端交互工具库(Web3项目一实战之三)

我们已然在上一篇 Web3项目灵魂所在之智能合约编写(Web3项目一实战之二) ,为项目写好了智能合约代码。 但身为开发人员的我们,深知高级编程语言所编写出来的代码,都是需要经过编译,而后外部方能正常调用。很显然,使用solidity这门新的高级编程语言编写出来的智能合约,也…

Python----图像的手绘效果

图像的数组表示 图像是有规则的二维数据&#xff0c;可以用numpy 库将图像转换成数组对象 : from PIL import Image import numpy as np imnp.array(Image.open("D://np.jpg")) print(im.shape,im.dtype)结果&#xff1a; 图像转换对应的ndarray 类型是3 维数据&am…

Linux三剑客:awk的基本用法

目录 认识awk 使用awk 语法 常用命令选项 awk变量 内置变量 自定义变量 printf命令 格式 演示 操作符 格式 演示 awk PATTERN 匹配部分 格式 演示 awk有意思的案例 认识awk awk是一种编程语言&#xff0c;用于在linux/unix下对文本和数据进行处理。数据可以来…

我的 2023 秋招总结,拿到了大厂offer

2023秋招小结 前言 & 介绍 作为2024年毕业的学生&#xff0c;在2023年也就是今年秋招。 现在秋招快结束了&#xff0c;人生可能没有几次秋招的机会&#xff08;应该就一次&#xff0c;最多两次吧哈哈&#xff09;&#xff0c;也有一点感悟&#xff0c;所以小小总结一下。…

如何用继承和多态来打印个人信息

1 问题 在python中的数据类型中&#xff0c;我们常常运用继承和多态。合理地使用继承和多态可以增强程序的可扩展性使代码更简洁。那么如何使用继承和多态来打印个人信息&#xff1f; 2 方法 打印基本信息添加子类&#xff0c;再定义一个class&#xff0c;可以直接从Person类继…

element-ui plus 文件上传组件,设置单选,并支持替换和回显

遇到的坑&#xff1a; 1、设置limit属性为1后&#xff0c;on-change属性不生效 2、on-exceed属性虽然值改变&#xff0c;但是回显没有随之变化 3、由于element-ui plus版本file-list值出现问题 最后的解决方案决定不设置 limit 属性&#xff0c;通过 on-change 中的判断来控制数…

网络规模与性能优化的一篇随笔

本周写篇轻松的话题&#xff0c;注意信息传输的尺度和缩放比例&#xff0c;写篇随笔。 控制面和数据面随规模缩放的影响&#xff0c;举几个例子就能说明白。 CSMA/CD&#xff0c;控制面和数据面在一起&#xff0c;控制信息交互时延和数据面时延在同一尺度时&#xff0c;就到了…

Auto.js 清除指定应用缓存

本文所有教程及源码、软件仅为技术研究。不涉及计算机信息系统功能的删除、修改、增加、干扰,更不会影响计算机信息系统的正常运行。不得将代码用于非法用途,如侵立删!Auto.js 清除指定应用缓存 环境 win10Pixel4Android13var packageName = ""; // 包名 var resu…

05 robotFrameWork+selenium2library 一维数组的使用

一、原生数组&#xff1a; 1、Excel中&#xff1a; LIST_OneRange 项目1|项目2 2、生成的PY&#xff1a; LIST_OneRange [u项目1,u项目2] 3、脚本使用&#xff1a; :FOR ${Local_I} IN RANGE len(${OneRange}) ${value} Evaluate ${OneRange}[${Local_I}] …

soc估计:DESIGN AND DEVELOPMENT OF SoC ESTIMATION MODEL USING MACHINE LEARNING

这是一篇印度那边学生的毕业论文&#xff0c;唯一要记录的是里面提到了一个特征构造的思想&#xff0c;记录如下&#xff1a; 论文思想&#xff1a; 特征选用速度、电流、电压、温度、平均电压、平均电流、平均速度&#xff0c;模型用cnnlstmlrlr 平均特征计算方式&#xff1a;…