触发HTTP preflight预检及跨域的处理方法

最近在做需求的过程中,遇到了很多跨域和HTTP预检的问题。下面对我所遇到过的HTTP preflight和跨域的相关问题进行总结:

哪些情况会触发HTTP preflight

preflight属于cors规范的一部分,在有跨域的时候,在一定情况下会触发preflight请求。根据MDN的总结,触发预检请求的情况在以下五项条件的任意一项不满足都有可能发生:

  1. 请求方式:只能够使用GET POST HEAD
  2. 请求头:只能包含以下九种请求头 Accept Accept-Language Content-Language Content-Type DPR Downlink Save-Data Viewport-Width Width
  3. Content-Type:Content-Type只能包含以下三种类型 text/plain multipart/form-data application/x-www-form-urlencoded
  4. XMLHttpRequestUpload对象:XMLHttpRequestUpload对象没有注册任何事件监听器
  5. ReadableStream对象:请求中不能使用ReadableStream对象

总结来说,跨域不一定会触发preflight请求,但发生preflight预检请求则一定跨域了。下面来看本次关于跨域报错的几种情况及处理方法:

关于跨域报错

1. 接口调用跨域

在业务实现中,两个系统之间进行跳转一定存在跨域。跨域的报错一般是这样的:

Access to XMLHttpRequest at 'https://t8lzp389o4.execute-api.ap-northeast-1.amazonaws.com/dev/feedback' from origin 'http://ac-badcase-feedback.s3-website-ap-southeast-1.amazonaws.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

或者这样的:

Access to XMLHttpRequest at 'https://t8lzp389o4.execute-api.ap-northeast-1.amazonaws.com/dev/feedback' from origin 'http://ac-badcase-feedback.s3-website-ap-southeast-1.amazonaws.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如何解决

可以看到,上述两种错误:

  1. 一种是提示被请求的资源缺少'Access-Control-Allow-Origin',该响应头是浏览器判断跨域的第一步。这种错误只需要给被请求的接口添加响应头即可解决:

response.setHeader("Access-Control-Allow-Origin", "*");

说明:* 表示可被所有服务跨域访问,可以替换成指定的服务,一般不建议使用 *

  1. 另一种是preflight校验没有通过。这种情况后端需要注意:对于跨域接口,需要添加OPTIONS请求处理。伪代码如下:
if (request.method === "OPTIONS") {response.status = 200return}

2. Access-Control-Allow-Private-Network

这种情况主要出现在:如从部署在亚马逊的系统跳转到部署在内网的业务系统的过程中。浏览器报错提示如下:

Access to XMLHttpRequest at 'http://private.com' from origin 'http://public.com' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `private`.

报错截图如下:

在这里插入图片描述

解决方法

  1. 开发时:

支持公网访问的私网接口,添加Access-Control-Allow-Private-Network响应头

在这里插入图片描述

  1. 使用时:

不同浏览器对该响应头的限制不同:

  • 对于Firfox:添加上述响应头后,该跨域即可解决,无需其它操作,访问成功
  • 对于Chrome:添加该响应头依然无法解决上述问题,需要的操作:
    • 访问chrome://flags/地址
    • 搜索Block insecure private network requests,将该选项设置成Disabled,如下图:
      在这里插入图片描述

相关资料

1. 私有网络访问限制

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

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

相关文章

设计模式-原型模式实践案例

原型模式(Prototype Pattern)是一种创建型设计模式,它通过复制现有的实例来创建新的实例,而不是通过初始化过程。在 Java 中,这通常是通过实现 Cloneable 接口并定义 clone() 方法来实现的。原型模式适用于创建复制对象…

linux 文件权限

仅仅记录一下,怎么添加文件权限 r表是读 (Read) 、w表示写 (Write) 、x表示执行 (eXecute) 读、写、运行三项权限可以用数字表示,就是r4,w2,x1,777就是rwxrwxrwx 你可能不懂什么意思 举个例吧! 如上图有一个文件,它…

arm系统构建的三部分

1.boot/loader 启动 uboot引导程序 uboot启动之前要明确内核文件位置(服务器-和网线连着的机器或SD卡),uboot设置参数,寻找文件位置(放服务器上,需要IP地址路径,通过网线下载到开发板上。&…

跨界探险:出海与网络安全的奇幻之旅

在这个全球化的时代,"出海"已经成为了众多企业家和技术爱好者的热门话题。不论是跨界电商、游戏产业,还是技术开发,所有的这些都离不开一个看似晦涩却又极为重要的技术——SOCKS5代理以及代理IP的应用。让我们一起踏上这场结合网络…

利用auto-py-to-exe库的简单图形界面实现.py到.exe的转换

文章目录 1. auto-py-to-exe 简介2. 安装与使用3. 配置项介绍4. 打包完成 1. auto-py-to-exe 简介 运行 .py 文件需要配套相应的 Python 解释器和相关的依赖项,而很多时候我们会面临光有待演示的 .py 程序,而没有支持演示的环境的尴尬。一种解决办法就是…

仪酷LabVIEW OD实战(4)——Object Detection+OpenVINO工具包快速实现yolo目标检测

‍‍🏡博客主页: virobotics(仪酷智能):LabVIEW深度学习、人工智能博主 🎄所属专栏:『仪酷LabVIEW目标检测工具包实战』 📑上期文章:『仪酷LabVIEW OD实战(3)——Object Detectiononnx工具包快速…

蓝桥杯2023年第十四届省赛真题-岛屿个数|DFS

题目链接: 蓝桥杯2023年第十四届省赛真题-岛屿个数 - C语言网 (dotcpp.com) 参考视频: 【[蓝桥杯]真题讲解:岛屿个数(BFS遍历图)】 https://www.bilibili.com/video/BV1uc411v7Tw/?share_sourcecopy_web&vd_sou…

Java+SpringBoot+Vue+MySQL:农业管理新篇章

✍✍计算机毕业编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java、…

Z Potentials | 星爵,他的征途不止向量数据库

纵观过去几十年的科技发展史,每一代新的技术架构的出现往往都伴随着新的数据范式的出现,也催生了多家百亿到千亿美金数据平台的诞生。如果说 2023 年科技领域的关键词是 LLM,那么数据库领域的关键词一定非向量数据库莫属。向量数据库是一种专…

【项目实践04】【RocketMQ消息收发拦截器】

文章目录 一、前言二、项目背景三、实现方案1. 关键接口2. 消息发送方3. 消息消费方4. 配置引入类5. 使用示例 四、思路扩展1. 消费流程简介 一、前言 本系列用来记录一些在实际项目中的小东西,并记录在过程中想到一些小东西,因为是随笔记录&#xff0c…

Vision Transformer结构解析

ViT简介 Vision Transformer。transformer于2017年的Attention is all your need提出,该模型最大的创新点就是将transformer应用于cv任务。 论文题目:An Image is Worth 16x16 Words: Transformers for Image Recognition at Scale 论文链接&#xff1…

501.二叉搜索树的众数

501.二叉搜索树中的众数 思路 第一眼,中序遍历哈希表找最大出现次数解题,暴力解法。需要中序遍历一遍哈希表取最大值一遍哈希表根据最大值找对应键一遍。复杂度3n。 后续,可根据二叉搜索树性质来解,在中序遍历时对前后两个相邻…

【工具相关】showdoc文档管理平台部署实践

文章目录 一、前言1、需求来由2、showdoc说明 二、部署安装1、docker安装2、showdoc安装3、设置开机自启 三、数据备份1、docker镜像备份2、showdoc数据备份 四、数据恢复1、docker镜像恢复2、showdoc数据恢复 五、常用操作1、镜像相关2、容器相关 一、前言 1、需求来由 内部…

Apache POI Excel的读写

1、 POI介绍 Apache POI是用Java编写的免费开源的跨平台的Java API,Apache POI提供API给Java程 序对Microsoft Office格式档案读和写的功能,其中使用最多的就是使用POI操作Excel文 件。 jxl:专门操作Excel maven坐标: POI结构:…

【Vue3-vite】动态导入路由

route文件结构 router moduleindex.ts 路由定义 // 需要导入的路由如下: const routes [{path: /manage,name: manage,component: () > import(/views/home/index.vue),children: manageRoutes,}]index.ts实现从module中自动导入 // 动态导入 const routeFil…

【信息系统项目管理师】--【信息技术发展】--【新一代信息技术及应用】--【虚拟现实】

文章目录 第二章 信息技术发展2.2 新一代信息技术及应用2.2.6 虚拟现实1.技术基础2.关键技术3.应用和发展 第二章 信息技术发展 信息技术是在信息科学的基本原理和方法下,获取信息、处理信息、传输信息和使用信息的应用技术总称。从信息技术的发展过程来看&#xff…

封关了,不仅封掉了港漂们方便的回家之路

封关不仅堵住了港漂回国的便捷途径,也堵住了港漂修理内地大大小小的电器的路。 香港当然有维修工。 听邻居说修一个漏水的水龙头要港币1000元,检查微波炉要港币600元。 更换主板需要4000元,比新机还贵。 收回坏掉的洗衣机修理费是14000元&am…

专家解读:2024年十大项目管理工具综合排名与评价

2024年涌现出一批新的项目管理工具,各具特色的功能和设计为企业解决了诸多的管理难题。今天我们就来盘点2024年的十款项目管理工具Zoho Projects、AgileMaster、PlanItAll、CommuniQ、WorkFlowRanger、GanttGenius、RiskAssessor、TeamHarmony、BudgetBoss、CloudCo…

Qt6.6搭建WebAssembly

1.首先安装python , 链接:https://www.python.org/ 2.下载并安装qt6. 3.克隆emsdk工程 3.1 进入emsdk目录,然后更新emsdk代码 3.2 下载并安装最新的SDK工具。(C:\Qt\emsdk>emsdk install --global latest) 3.3…

【C++】C/C++内存管理详解

个人主页 : zxctscl 文章封面来自:艺术家–贤海林 如有转载请先通知 目录 1. 前言2. C/C内存分布3. C语言中动态内存管理方式4. C中动态内存管理4.1 new/delete操作内置类型4.2 new和delete操作自定义类型 5. operator new与operator delete函数5.1 oper…