相思资源网 Design By www.200059.com

问题描述:

Vue的开发者都知道axios,很多都用axios来进行数据交互,axios的默认请求头是Content-Type: application/json

使用这个请求头会出现向服务器请求两次的情况

为什么呢?

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

大概意思就是:

浏览器对后台说:我可以请求你吗? ( ̄ˇ ̄) 
后台说:阔以。( ̄▽ ̄)~*
结果是:发送原有的GET(POST)请求
后台说:不阔以。(‵﹏′)
结果是:报错

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

如何解决这个问题?不允许浏览器请求,只发送真正的请求,我也没解决,如果有已经解决的朋友可以告诉我解决方法~( ̄3 ̄)~

但.......

我有可以替代的方法

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

可是问题又来了

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

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

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

这时候我们需要用到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
    }
   });

总结

以上所述是小编给大家介绍的解决axios会发送两次请求,有个OPTIONS请求的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

标签:
axios发送两次请求,axios请求两次

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

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

暂无解决axios会发送两次请求,有个OPTIONS请求的问题的评论...