浏览器POST请求 变成OPTIONS（vue）

最新推荐文章于 2024-04-29 10:43:29 发布
最新推荐文章于 2024-04-29 10:43:29 发布
阅读量4.7k 收藏 9
点赞数 1
分类专栏： springboot class 文章标签： 过滤器 java post vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40011778/article/details/119889452
版权

POST请求 变成OPTIONS

vue前端发送POST请求，用postman请求能正常访问，但是浏览器却会报错
在这里插入图片描述
在后台过滤器中debug，发现method请求方法变成了OPTIONS

在这里插入图片描述
因为后台是需要获取post请求 body中的参数,如果参数为空是不能通过的, 而请求变成options了 请求body是空的 所以后台报参数为空的错误。
现在知道了出错的原因,那么我们现在就来了解一下options方法

首先了解一下options是什么？
在这里插入图片描述
options在此问题中属于第二种，当涉及到跨域时，并且是post请求时，本地服务器会先发送一个options请求到服务器，如果服务器认为options请求时无危险性且认可的，那么在允许本地服务器发送post请求；但是如果后端认为options请求是危险且不成功的那么会直接阻止本地服务器发送其他请求

解决办法

直接在过滤器中判断方法如果是OPTIONS 则放行，简单粗暴
在这里插入图片描述
options方法通过了, 它会再次发送真正的POST请求

锦瑟思年华
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
OPTIONS请求（跨域预检查）
ACGkaka的博客
03-15 1146
OPTIONS请求（跨域预检查）
vue 组件post请求变options解决办法
Steven_yang_1的博客
06-20 2948
在网上七找八找，找一堆网上添加最后，发现不是后端跨域问题，是前端的问题。将该处直接删除就能正常请求了。不过后端的跨域配置也要更改添加，关于网上说的ps配置，在此处也不用了。想要了解具体原因自己去研究。就是导致post-options的关键地方。以上就是最直观，最简单的组件调用axios请求，根据被我注释的地方。
OPTIONS 预检请求是什么？
最新发布
stay hungry, stay foolish
04-29 339
OPTIONS 请求是 HTTP 协议中的一种请求方法。它是 HTTP/1.1 规范中引入的，属于“预检请求”（preflight request）的一部分，主要用于跨域资源共享（CORS, Cross-Origin Resource Sharing）的场景中，但也适用于其他需要了解服务器功能的场合。
解决在Vue中使用axios POST请求变成OPTIONS的问题
01-19
POST请求变成OPTIONS 及报错信息（跨域） 主要解决方案：使用qs.stringify 1、安装qs npm install qs –save 2、axios配置和使用 在接口请求页面引入安装好的qs，如下图： 引入完成之后使用qs改变传递的参数data，如下： 这样就可以了，post请求的时候就不会再出现OPTIONS了 补充知识：axios发起请求，为什么先发送options请求，再发送get/post请求 引起原因 1，跨域； 2，请求头非默认情况。 默认请求头如下 Accept Accept-Language Content-Language Last-Eve
因跨域，post请求变options请求（vue）
Mr_Zhangxiaosen的博客
04-12 2万+
1、options是什么？ options在此问题中属于第二种，当涉及到跨域时，并且是post请求时，本地服务器会先发送一个options请求到服务器，如果服务器认为options请求时无危险性且认可的，那么在允许本地服务器发送post请求；但是如果后端认为options请求是危险且不成功的那么会直接阻止本地服务器发送其他请求 2、出现场景 本次在做vue后台管理系统时，打包之后利用nginx在...
post 变成option 请求的三种原因以及解决办法
SpringBears的博客
06-20 1万+
1.Http Options Method 简而言之，OPTIONS请求方法的主要用途有两个： 获取服务器支持的HTTP请求方法； 用来检查服务器的性能。 2.CORS(跨域资源共享) CORS是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 前端 客户端使用XmlHttpRequest发起Ajax请求，当前绝大部分浏览器已经支持CO...
Vue3+Vite项目解决跨域问题 post请求方式变成options
栗子的博客
04-01 1340
Vue3+Vite项目解决跨域问题 post请求方式变成options
Vue发送ajax post请求，变为options请求，并返回错误代码403的解决方案
风吟Pro的博客
01-16 6651
问题描述： 采用vue发送ajax请求 var vm = new Vue({ el:"#myModal", data:{ moduleName:"", moduleIp:"" }, methods:{ addModule:function () { console.log("add"); $.ajax({ url: "http://localhost:8801/management/saveModuleInfo",
Vue使用axios出现options请求方法
10-16
这是因为POST请求在CORS策略下被认为是不安全的，所以浏览器会先发送OPTIONS请求来确保服务器允许这种类型的请求。以下是相关知识点的详细说明： 1. **CORS**：CORS是一种W3C标准，它允许浏览器和服务器进行跨域...
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
01-19
简单跨域不会发送options请求，复杂跨域会发送一个预检请求options。 1.简单跨域满足的条件 1.请求方式是以下三种之一： HEAD GET POST 2.HTTP的头信息不超出以下几种字段 Accept Accept-Language Content-...
Python Tornado之跨域请求与Options请求方式
09-17
提到的Options请求是CORS预检请求，浏览器在发送实际的GET、POST等请求之前，会先发送一个Options请求，检查服务器是否允许这次跨域请求。因此，Tornado需要处理Options请求，确保返回正确的响应头： ```python ...
axios 设置请求头之后POST或GET变成了OPTIONS，报错405
xustart7720的博客
05-14 8344
报错如图： 首先出现options请求是因为你添加了自定义的请求头，导致你的简单跨域请求变成了复杂跨域的。 本人看了很多相关文章，有的说让后台加什么请求头，不行。让运出来一下，还是可以的。 自己瞎搞搞，发现，有一个请求头其实不需要的，注释了。就再也不会调用options方式请求啦！！！！ import axios from 'axios'; import qs from 'qs'; let i...
http post option
u013550000的博客
08-13 250
demo var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/post-here/'; var body = '<?xml version="1.0"?><person><name>Arun</name></person>'; ...
post请求带来的option
weixin_33736832的博客
06-04 949
关于前端通过post请求调服务器信息的时候，我们会发现两条请求，一条请求的Request Method为Options，另一条请求的Reuest Method为Post。 在网上阅读一些信息之后发现和三个基本概念有关系 Http Options Method 简而言之，OPTIONS请求方法的主要用途有两个： 获取服务器支持的HTTP请求方法； 用来检查服务器的性能。 CORS(...
ajax中出现两次请求
fwk19840301的博客
05-28 1万+
在项目中发现ajax中出现两次请求，OPTIONS请求和GET请求，得到的数据出错，所以想要去掉OPTIONS请求。ajax请求如下： ajaxRequestGet: function (lastPath, requestParams, successFun) { $.ajax({ headers: { ...
HTTP的请求方法OPTIONS
热门推荐
Linlei的专栏
03-28 15万+
HTTP请求方法并不是只有GET和POST，只是最常用的。据RFC2616标准（现行的HTTP/1.1）得知，通常有以下8种方法：OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE和CONNECT。 官方定义 OPTIONS方法是用于请求获得由Request-URI标识的资源在请求/响应的通信过程中可以使用的功能选项。通过这个方法，客户端可以在采取具体资源
http中的options请求，post请求两次的原因
weixin_48263393的博客
09-11 808
http中的options请求作用，请求发送两次的原因
axios,post 请求变成 options
04-28
当我们在使用 `axios` 进行 `post` 请求时，有时会出现 `post` 请求被自动变成了 `options` 请求的情况，这是因为在 CORS（跨域资源共享）相关的规范中，发出的一个跨域请求要经过预检请求阶段，才能得到服务器的正式响应。而这个预检请求就是 `options` 请求。 出现这种情况可能是因为以下原因： 1. 跨域请求被浏览器禁止了。浏览器一般会限制跨域请求，如果请求的目标域名和源域名不同，则会自动添加 `options` 请求 2. 后端没有正确返回 CORS 相关的响应头。在 `options` 请求中，浏览器会检查目标域名的返回头中是否包含了 `Access-Control-Allow-Origin`, `Access-Control-Allow-Methods`, `Access-Control-Allow-Headers` 等跨域相关的响应头字段，如果没有，则 `post` 请求就会被浏览器转换为 `options` 请求 因此，如果出现 `post` 请求变为 `options` 请求的情况，可以检查以下几个方面： 1. 确认是否请求的目标域名与源域名不同。如果是同域名请求，则不存在跨域问题 2. 检查后端接口是否支持 CORS，是否正确设置跨域相关的响应头 3. 如果是 Vue 项目或其他前端框架，可以使用 `vue.config.js` 或 `webpack.config.js` 等配置文件进行跨域设置

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值