关于vue中用axios出现两次请求,一次是options请求的问题

本文探讨了Vue项目中使用axios进行数据交互时遇到的两次请求问题,其中一次是OPTIONS预检请求。文章解释了浏览器为何会发起预请求以检查CORS跨域资源分享,并提供了解决方案:在main.js中修改axios的默认Content-Type为'application/x-www-form-urlencoded',并使用qs模块转换数据格式以避免不必要的OPTIONS请求。

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

要处理这个问题先要了解cors跨域资源共享,可以到阮大神的微博了解一下。http://www.ruanyifeng.com/blog/2016/04/cors.html
参考:https://segmentfault.com/a/1190000016040998
注:这个问题与用不用axios无关,只是axios在我们项目上使用的比较多,所以大家才以为是axios出现的问题。

产生原因:跨域请求中用了非简单请求(not-so-simple request),因为axios默认跨域请求Content-Type = “application/json”
啥是非简单请求:非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。
解决方法:让axios的请求改为简单请求,修改axios的请求字段Content-Type改为'application/x-www-form-urlencoded',请求数据的时候用qs模块进行转化一下。

 

问题描述:

Vue的开发者都知道axios,很多都用axios来进行数据交互,axios的默认请求头是Content-Type: application/json
使用这个请求头会出现向服务器请求两次的情况
为什么呢?

原因是:浏览器会首先使用 OPTIONS 方法发起一个预请求,判断接口是否能够正常通讯,如果不能就不会发送真正的请求过来,如果测试通讯正常,则开始真正的请求。

大概意思就是:
浏览器对后台说:我可以请求你吗?
后台说:阔以。
结果是:发送原有的POST请求
后台说:不阔以。
结果是:报错

那么这样每个请求都会发送两次,无形加重了服务器的负担(如果服务器特厉害就当我没说),网上有的解决办法是让后台允许options请求,但是并不返回任何数据,那么就不会报错,可是这样治标不治本,浏览器还是来撩后台了,只是后台不让撩而已。


 

如何解决这个问题?

那就是在main.js中,设置axios的默认请求头axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';

 

后台不认这个数据格式啊...

所以在传递的时候必须先把数据转换格式

这时候我们需要用到qs模块
先 npm install qs

在main.js中

引入qs模块 

import qs from 'qs

然后弄qs原型

Vue.prototype.$qs = qs

这样我们就可以在axios post请求的时候将我们传递的数据转换成后台认识的格式

this.$axios
     .post("http://xxx/", 
        this.$qs.stringify(postData)
      ).then(data => {
        if (data.data.status != 200) {
          //xxx
        } else {
          //xxx
        }
      });


 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值