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


Posted in Javascript onOctober 25, 2018

问题描述:

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请求的问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
DOM相关内容速查手册
Feb 07 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
学习vue.js条件渲染
Dec 03 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 #Javascript
webpack4+react多页面架构的实现
Oct 25 #Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 #Javascript
代码整洁之道(重构)
Oct 25 #Javascript
Vue使用NPM方式搭建项目
Oct 25 #Javascript
小程序云开发实战小结
Oct 25 #Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
Oct 25 #Javascript
You might like
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
js直接编辑当前cookie的脚本
2008/09/14 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
python numpy 显示图像阵列的实例
2018/07/02 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
python 绘制场景热力图的示例
2020/09/23 Python
两种CSS3伪类选择器详细介绍
2013/12/24 HTML / CSS
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
百联网上商城:i百联
2017/01/28 全球购物
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
七一讲话心得体会
2014/09/05 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
三方股份合作协议书
2014/10/13 职场文书
六年级学生期末评语
2014/12/26 职场文书
写给导师的自荐信
2015/03/06 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python