浏览器预检请求返回400 has been blocked by CORS policy: Response to preflight request doesn’t pass access cont

已于 2022-04-02 20:50:21 修改
阅读量3.7w 收藏 6
点赞数 3
文章标签： react 前端 http 网络协议
于 2022-04-02 20:35:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53512283/article/details/123923734
版权

  

这个问题也是很过分头一次遇到，原因是谷歌浏览器在有跨域（CORS）请求时，会先发送一个preflight（预检）请求，之后才会发送fetch请求。

CORS：跨源资源共享 (CORS)（或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它origin（域，协议和端口），这样浏览器可以访问加载这些资源。跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的"预检"请求。在预检中，浏览器发送的头中标示有HTTP方法和真实请求中会用到的头。

跨源HTTP请求的一个例子：运行在 https://domain-a.com 的 JavaScript 代码使用 

最低0.47元/天 解锁文章
卫三金
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
01-19
我们在vue开发中用axios进行跨域请求时有时会遇到，同一个接口请求了两次，并且第一次都是options请求，然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢？ 这是因为CORS跨域分为 简单跨域请求和复杂跨域请求； 简单跨域不会发送options请求，复杂跨域会发送一个预检请求options。 1.简单跨域满足的条件 1.请求方式是以下三种之一： HEAD GET POST 2.HTTP的头信息不超出以下几种字段 Accept Accept-Language Content-Language Last-Event-ID Content-
基于CORS实现WebApi Ajax 跨域请求解决方法
12-08
当浏览器尝试发起跨域请求时，它会先发送一个预检请求（OPTIONS），即所谓的Preflight Request，以询问服务器是否允许即将发送的真正请求。预检请求中包含了请求方法（如POST、PUT等）、预期使用的Content-Type以及...
has been blocked by CORS policy: Response to preflight request doesn‘t pass access control 跨域解决
u013183495的专栏
06-02 7635
###问题一，普通请求跨域，在服务响应头中添加指定头信息 cpp` http_response sp(status_codes::OK); sp.headers().add("Access-Control-Allow-Origin","*"); sp.headers().add("Access-Control-Allow-Methods","*"); sp.headers().add("Access-Control-Allow-Headers","*"); sp.set_body(msg.seria.
THINKPHP跨域报错的解决方案
Oona_01的博客
06-29 55
这篇文章主要介绍了THINKPHP跨域报错has been blocked by CORS policy: Response to preflight request doesn't pass access control check的解决方案,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下。php在批量导入excel数据更新时偶尔会出现这个问题，出现时间不定，中间件都配置了跨域还是不行。以上就是THINKPHP跨域报错的解决方案的详细内容，更多关于THINKPHP跨域报错的资料请关注。
Nginx配置跨域请求Access-Control-Allow-Origin * 详解
09-09
预检请求（Preflight Request）是CORS机制的一部分，主要针对非简单请求。例如，当Content-Type设置为application/json，或者使用PUT、DELETE等非标准HTTP方法时，浏览器会先发送一个OPTIONS请求询问服务器是否允许...
laravel-cors：在Laravel应用程序中发送CORS标头
01-28
该软件包支持预检请求，并且可以轻松配置以满足您的需求。安装Laravel您可以通过Composer安装软件包： composer require spatie/laravel-cors 包裹将自动注册其服务提供商。 提供的Spatie\Cors\Cors中间件必须在...
前端Web-JavaScript(上)
Yu2uki的博客
07-31 1559
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
html+css+js实现一个简单的电商商城首页
爱敲代码的卡拉米的博客
08-02 233
很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等!绿泡泡：XiaoMei_NN。
高德地图离线版 使用高德地图api的方法
m0_62336925的博客
08-02 472
然因为高德地图的瓦片地图太大，所以要让后端部署下 前端直接调用 如果本地 直接找到瓦片图路径就可以。这个代码把你想用的方法名保存到本地。这个时候会报错 因为没有这个方法。然后就可以正常使用这个方法拉。然后使用他的离线方法。找到对应的名字 复制。
【面试经验】滴滴 秋招储备实习 前端面经
最新发布
litterfinger的博客
08-05 125
时间线：5.15 11点半一面，下午2点半二面。● 不知道盒子宽高情况下水平垂直居中。● scale是怎么放大盒子宽高的。● transform的属性。滴滴秋招储备实习 前端面经。● 文件断点续传+切片上传。● 自我介绍+项目介绍。
文章相关接口
qq_74474809的博客
08-03 210
跟着黑马程序员学习SpringBoot3+Vue3
小程序支付（前端）
weixin_43993121的博客
08-05 45
【代码】小程序支付（前端）
vuex知识
qq_16570607的博客
08-04 315
将getMoviesRankingInDouban的action用promise包装一下, 在此次请求结束后, 根据此次请求返回的电影的id, 根据id再次请求电影的信息。数据请求,在action中, 根据传入的参数(数字1-250)异步请求电影数据, 在请求完成后提交mutation。例子：在action中, 根据传入的参数(数字1-250)异步请求电影数据, 在请求完成后提交mutation。状态更改,在mutation中,将查询的结果(传入的参数), 赋值给state中声明的变量。
前端面试：项目细节重难点问题分享（十四）
weixin_49062485的博客
08-02 600
更多详情：爱米的前端小笔记（csdn~xitujuejin~zhiHu~Baidu~小红shu）同步更新，等你来看！都是利用下班时间整理的，整理不易，大家多多👍💛➕🤔哦！你们的支持才是我不断更新的动力！
【前端面试】五、框架
weixin_49015558的博客
07-31 575
1 Vue2 2 Vue3 3 React 4 Angular
【网页设计】基于HTML+CSS上海旅游网站网页作业制作
爱敲代码的卡拉米的博客
08-02 760
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2730
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
【简历】湘南某二本学院：前端简历指导，秋招面试通过率低
shuize123的博客
07-31 422
搜索和防抖之间有的区分，如果是有的话，可以去做一个处理，但是一般来说，这两个之间没什么太大关系，搜索和防抖，没有什么相关度，因为我们调后端接口都是异步调用，所以他不会出现卡顿现象，他的卡顿在什么地方，我觉得这个描述不太对，另外呢使用图片转载，这都是一个最小的一个事情，他就是一个基本的功能，就是可以说是都会的功能，所以亮点不够，至少这几个描述亮点还是有的，但是不够，挂号系统就没好讲了，这个依然是一个重度很高的项目。，其他的什么英语阅读，四级能力，这个不要去写了，没什么用。，又是登录，那登录这事太简单了，
中国象棋 纯网页前端 演示与下载
qq_30049249的博客
08-01 496
https://andi.cn/app/chess/
has been blocked by CORS policy: Response to preflight request doesn‘t pass access control check
08-11
- *3* [浏览器预检请求返回400 has been blocked by CORS policy: Response to preflight request doesn’t pass ...](https://blog.csdn.net/weixin_53512283/article/details/123923734)[target="_blank" data-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值