axios 跨域时，发送 post 请求变 options 的问题

最新推荐文章于 2023-05-23 09:29:15 发布
原创 最新推荐文章于 2023-05-23 09:29:15 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#axios #post #vue

博客指出请求发送时，若不满足特定条件，每次发送请求前会发送 options 请求。需满足 get、post、head 请求类型，不设置特定列表外 header，Content-Type 为特定值。默认请求无需加头部，并提及解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

根源在于，我们发出去的请求不是 simple request，那么在每次发送请求之前，都会发送一个 options 请求，simple request 需要同时满足以下条件（规范可以百度查询）：

  1. get、post、head 请求类型
  2. 不要设置列表之外的 header（如： user-agent）
  3. Content-Type 只能是：
    1. application/x-www-from-urlencoded
    2. multipart/from-data
    3. text/plain

其他资料也说过，默认请求就是 application/json, 所以不需要自己加上头部，解决方案：

Axios中每次发送post请求前都会发送options请求
willluckysmile的博客
03-11 2483
今天写前端的时候，发现每次post请求都会失败， 反复调试过后发现axios在每次发送post请求前都发送了options请求， 在网络搜罗了一大圈， 发现了原因是因为web页面发送了请求给vue后， vue再请求后端过程中发生了跨域， 而我使用的不是默认的跨域允许请求头， 而是content-type: application/json， 所以浏览器认为跨域即是不可靠行为， 所以每次都需要发送options请求， 进行跨域检测， 所以导致了每次options请求失败了， 所以post请求就没有下文了。
axios 设置请求头之后POST或GET变成了OPTIONS，报错405
xustart7720的博客
05-14 8614
报错如图： 首先出现options请求是因为你添加了自定义的请求头，导致你的简单跨域请求变成了复杂跨域的。 本人看了很多相关文章，有的说让后台加什么请求头，不行。让运出来一下，还是可以的。 自己瞎搞搞，发现，有一个请求头其实不需要的，注释了。就再也不会调用options方式请求啦！！！！ import axios from 'axios'; import qs from 'qs'; let i...
解决在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 变成 options请求解决方法
Seaern的博客
05-11 1327
首部字段 Access-Control-Max-Age 表明该响应的有效时间为 86400 秒，也就是 24 小时。在有效时间内，浏览器无须为同一请求再次发起预检请求。请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。 1.引入qs <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script> <script src="https://cd.
axios中POST请求变成OPTIONS问题处理
a5252145的博客
07-31 1571
axios中POST请求变成OPTIONS问题处理
axios options请求后台跨域配置
ann123_2016的博客
06-27 511
app.all('*', function (req, res, next) { res.set('Access-Control-Allow-Origin', '*'); res.set('Access-Control-Allow-Credentials', true); res.set('Access-Control-Allow-Meth...
axios post请求变为options请求的解决方法
weixin_30527423的博客
05-10 1072
全局配置 axios.defaults.headers['Content-Type']='application/x-www-form-urlencoded' 注意：使用全局配置会导致所有请求头的‘Content-Type'均为’application/x-www-form-urlencoded' 局部配置 axios.post(url,{ header:{ 'Content-T...
axios一设置请求头就OPTIONS
u010914880的博客
11-13 947
首先出现options请求是因为你添加了自定义的请求头，导致你的简单跨域请求变成了复杂跨域的。 headers: { // 'X-Requested-With': 'XMLHttpRequest', // 就是这个 header:{ Content-Type': 'application/x-www-form-urlencoded; charset=utf-8' }, ...
解决axios跨域时，发送post请求变options的问题
JEFF_xieyuzhi的博客
03-27 5521
mounted() { let config = { headers : { 'Content-Type':'application/json;charset=UTF-8' }, }; axios.post('http://scms.qccat.com/v1/statistic/info-stu.json',{ token:"da48d456d...
axios请求出现options方式
qq_39025670的博客
07-08 7557
出现原因及解决方法： 浅谈 AJAX 跨域请求时的 OPTIONS 方法 其他相关文章： 为什么axios先请求options在请求post及解决方法 axios中POST请求变成OPTIONS处理 注：当前端解决不了时，看看是否是后端的问题 ...
axios中的OPTIONS请求
像鱼的博客
12-29 948
options请求
axios请求中的post请求变成OPTIONS请求，如何解决跨域请求。
热门推荐
黑色笔记
06-22 2万+
深的我也不理解，就说怎么简单明了的解决吧。SpringMVC 4.2 后增加，注解：@CrossOrigin 解决跨域请求问题。直接在类名上加上这个注解就行了，也可以单独的在某个方法名上加这个注解。...
节流Axios_解决vue axios跨域 Request Method： OPTIONS问题(预检请求)
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
08-16 597
　　我们在vue开发中用axios进行跨域请求时有时会遇到，同一个接口请求了两次，并且第一次都是options请求，然后才是post/get请求 　　如下图 　　 　　options请求 　　 　　get请求 　　为什么会出现这种原因呢？ 　　这是因为CORS跨域分为 简单跨域请求...
vue 解决axios会发送options请求
qq_38253703的博客
04-17 5148
问题描述： Vue的开发者都知道axios，很多都用axios来进行数据交互，axios的默认请求头是Content-Type: application/json 使用这个请求头会出现向服务器请求两次的情况 为什么呢？ 原因是：浏览器会首先使用 OPTIONS 方法发起一个预请求，判断接口是否能够正常通讯，如果不能就不会发送真正的请求过来，如果测试通讯正常，则开始真正的请求。 这样每个请求都会发送...
axios 请求出现options的原因和解决方案
weixin_33860737的博客
04-23 597
原因: 主要是因为跨域,参考以下文章https://segmentfault.com/q/1010000010159122?sort=createdhttps://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS 解决方案,使用qs,...
axios请求接口发起两次请求（OPTIONS 与POST/GET）
山水子农
08-09 2万+
     使用axios发现每次调用接口都会有两个请求，第一个请求时OPTIONS请求，只有OPTIONS请求通过才会发送实际的请求。      为什么XMLHttpRequest的POST请求会变OPTIONS请求－XMLHttpRequest对象对HTTP请求的访问控制（CORS跨站资源共享）；HTTP访问控制（CORS）；通过这两篇文章可以知道什么是OPTIONS请求，如果要避免OPT...
解决 axios 跨域时，发送 post 请求变 options 的问题
python的神奇之旅
12-17 6475
前端：VUE 后端：django 前后端调试时post请求，发现请求方式为options,服务端不接受，后查询发现遇到大名鼎鼎的跨域问题。 跨域：协议、ip、端口只要前后端有一个不一样就会出现跨域问题。浏览器会尝试向后端发送option请求-&gt;想后端询问是否支持从前端的这个域名发起跨域请求，后端返回allow。 解决方式： 1、安装 pip install django-cor...
VUE axios为什么会发送options和post请求
dreamLeadToword的专栏
05-23 1189
在使用Vue和Axios进行HTTP请求时，当浏览器发现跨域请求时，会先发送一个OPTIONS预检请求，以确认服务器是否支持该跨域请求。如果服务器支持该跨域请求，则浏览器再发送POST请求来获取数据。这是因为跨域请求需要遵循同源策略，即只能向同一域名、端口和协议发起HTTP请求。而当我们使用Vue和Axios向不同的域名、端口或协议发起HTTP请求时，就会触发跨域问题。为了解决这个问题，浏览器会首先发送一个OPTIONS预检请求来询问服务器是否允许该跨域请求。
在Vue项目中如何配置axios以支持跨域POST请求，并处理OPTIONS预检请求问题？
最新发布
11-08
当你在开发过程中遇到OPTIONS预检请求问题时，问题通常出现在浏览器的安全策略上。浏览器会先发送一个OPTIONS请求来确定是否允许跨域的POST请求。 解决这个问题的关键在于后端配置。如果后端服务是用PHP开发的，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值