解决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 相关文章推荐
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
javascript淡入淡出效果的实现思路
Mar 31 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
js实现星星海特效的示例
Sep 28 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
在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
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
详解PHP中的Traits
2015/07/29 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2011/06/27 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
[01:03:22]LGD vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
Python中zip函数如何使用
2020/06/04 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
Python实现像awk一样分割字符串
2020/09/15 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
德国净水壶和滤芯品牌:波尔德PearlCo(家用净水器)
2020/04/29 全球购物
通用求职信范文模板分享
2013/12/27 职场文书
大学生创业计划书的范文
2014/01/07 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
教师先进事迹材料
2014/12/16 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
Win11任务栏太宽了怎么办?一招解决Win11任务栏太宽问题
2021/11/21 数码科技