解决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 相关文章推荐
accesskey 提交
Jun 26 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
JavaScript中的prototype和constructor简明总结
Apr 05 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
Javascript获取某个月的天数
May 30 Javascript
详解Vue CLI3配置解析之css.extract
Sep 14 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 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
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
用PHP书写安全的脚本代码
2012/02/05 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
自己的js工具 Event封装
2009/08/21 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
微信小程序HTTP接口请求封装代码实例
2019/09/05 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
[01:20:06]TNC vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
Python实现的服务器示例小结【单进程、多进程、多线程、非阻塞式】
2019/05/23 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
在PyCharm中遇到pip安装 失败问题及解决方案(pip失效时的解决方案)
2020/03/10 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
马来西亚网上购物:Youbeli
2018/03/30 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
元旦联欢会主持词
2014/03/26 职场文书
工会换届选举方案
2014/05/21 职场文书
党员教师一句话承诺
2014/05/30 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
2015年材料员工作总结
2015/04/30 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python