axios发送POST时请求两次，第一次为OPTIONS

最新推荐文章于 2022-12-29 15:02:44 发布

defqfhs31233420

最新推荐文章于 2022-12-29 15:02:44 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/CarrotHu/p/10499838.html

版权

在前端使用axios发送POST请求时，浏览器会先发送OPTIONS请求进行预检。由于CORS策略，这导致后台无法接收到POST参数。解决办法是将请求转化为简单请求，如通过表单格式提交数据，以避免OPTIONS请求。

摘要由CSDN通过智能技术生成

出现问题：

发送POST请求时浏览器产生两次请求，第一次为OPTIONS，第二次是真正的POST请求，后台接收不到参数。

查找原因：

非GET请求，会先发送OPTIONS进行预检（预检请求每次运行只发生一次）致使后台接收不到参数值，不停返回参数错误。

于是找到了原因：

查找解决方案：

CORS文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

解决方案：（可行&#x

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

defqfhs31233420

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Axios请求（对ajax的二次封装）——Axios API、Axios实例、请求配置、Axios响应结构

XSL_HR的博客

04-14

1473

一篇文章带你学会axios请求——Axios API、Axios实例、请求配置、Axios响应结构

解决axios会发送两次请求,有个OPTIONS请求的问题

01-19

问题描述： Vue的开发者都知道axios，很多都用axios来进行数据交互，axios的默认请求头是Content-Type: application/json 使用这个请求头会出现向服务器请求两次的情况为什么呢？原因是：浏览器会首先使用 OPTIONS 方法发起一个预请求，判断接口是否能够正常通讯，如果不能就不会发送真正的请求过来，如果测试通讯正常，则开始真正的请求。大概意思就是：浏览器对后台说：我可以请求你吗？ (￣ˇ￣)　后台说：阔以。(￣▽￣)~* 结果是：发送原有的GET(POST)请求后台说：不阔以。(‵﹏′) 结果是：报错那么这样每个请求都会发送两次，无形加重了服

参与评论您还未登录，请先登录后发表或查看评论

解决在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

axios 发送post请求的时候会发送两次

hugejihu9的专栏

12-21

1242

文章来自：源码在线https://www.shengli.me/javascript/471.html

后端跨域设置

陈如水的专栏

10-24

1045

为什么会出现跨域问题出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）当一个请求url的协议、域名、端口三者之间任意.

CORS 中的POST and OPTIONS 请求

skiof007的专栏

04-26

2276

var req = new XMLHttpRequest(); req.open('post', 'http://127.0.0.1:3001/user', true); req.setRequestHeader('Content-Type', 'application/json'); req.send('{"name":"tobi","species":"ferret"}');

AJAX跨域POST发送json时，会先发送一个OPTIONS预请求

u011927449的博客

05-06

606

我们会发现，在很多post,put,delete等请求之前，会有一次options请求。根本原因就是，W3C规范这样要求了！在跨域请求中，分为简单请求（get和部分post，post时content-type属于application/x-www-form-urlencoded，multipart/form-data，text/plain中的一种）和复杂请求。而复杂请求发出之前，就会出现一次op...

解决vue axios跨域 Request Method: OPTIONS问题(预检请求)

01-19

我们在vue开发中用axios进行跨域请求时有时会遇到，同一个接口请求了两次，并且第一次都是options请求，然后才是post/get请求如下图 options请求 get请求为什么会出现这种原因呢？这是因为CORS跨域分为简单...

解决vue请求接口第一次成功,第二次失败问题

10-14

总的来说，解决Vue请求接口第一次成功、第二次失败的问题需要从多个角度排查，包括但不限于数据的正确管理、请求的类型和跨域策略。通过仔细分析请求和响应的细节，通常可以找到问题的根源并采取相应的解决措施。

H5请求服务端发送POST请求之预请求-OPTIONS

大后生大大大的博客

12-19

3051

1.问题场景 1.1 H5端请求服务端接口时，需要在header中携带服务端用jwt规范生成的token 1.2 在接收到H5的请求时Filter需要从请求头中拿出token做校验，检查当前的token是否是合法的。然后根据校验结果做出对应的响应，token合法就放行，不合法就返回错误信息。 @WebFilter(filterName = "jwtFilter", urlPatterns ...

调用一次接口发送两次请求--多出来的OPTIONS

热门推荐

zhangxy的博客

12-02

2万+

有的时候就会莫名的忧伤或者心情烦躁

axios请求接口，请求了两次的解决方案

大炮哥的博客

10-19

3165

设置axios的请求头的"Content-Type"为"application/x-www-form-urlencoded;charset=UTF-8"这里只讲述解决办法，至于为啥多出了个options请求，有兴趣的自行百度了解。大家是否遇到过这种情况，使用axios请求一个接口时，请求了两次。分别了options请求及我们期待的post请求。请求参数的载体使用URLSearchParams。OK~，仅需两个步骤即可优化两次的请求。

Vue使用axios发送两次请求，多了options 请求

轻风细雨_林木木

11-17

1701

Vue使用axios发送两次请求，多了options 请求

axios中的OPTIONS请求

像鱼的博客

12-29

877

options请求

ajax登录第一次没有post成功，第二次post成功了

心有猛狗

01-04

4116

当我第一次点击登录的时候，从控制台看到没有post请求，但后台却打印出了账号和密码，同一个页面不刷新，我第二次点登录的时候，控制台就有post请求了，而且账号验证的代码也能正常运行我这个情况比较奇葩，后来仔细检查代码，发现是我的前端登录页面,form 标签的action属性还在，当我点击登录的时候数据会先走form标签的action路径，所以post提交失败...

axios的post请求会发送了2次请求，解决方案

qq_24343389的博客

11-12

1917

1、引用qs模块 2、在main.js中设置默认请求头axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded' 3、需要在后台进行设置，允许options请求参考文档: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Acce...

跨域请求避免OPTIONS请求（预检请求）

Turbo

07-06

1万+

有时候前后端分离域名不一致，会造成跨域请求而跨域请求有时候会自动发起两次请求，第一次为预检请求，即OPTIONS请求一般来说使用 application/json 的 post 请求是必然会带入OPTIONS请求 OPTIONS请求也被称为预检请求，主要用于获知服务端支持的HTTP请求方法。跨域资源共享(CORS)标准新增了一组 HTTP 首部字段，配合预检请求可获知服务器允许哪些源站通过浏览器有权限访问哪些资源。但是在有些get请求中也会OPTIONS请求，这里补充下回发生options的情况当发

跨域问题的OPTIONS预查请求后未发送POST请求

平凡老者

03-02

1829

工作中遇到的 OPTIONS 请求发起响应200但未发送POST业务请求

axios发送post请求返回options 请求403