解决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 相关文章推荐
js获取当前日期代码适用于网页头部
Jun 27 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
Jul 01 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
May 25 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
vue中echarts引入中国地图的案例
Jul 28 Javascript
js实现筛选功能
Nov 24 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
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
10条php编程小技巧
2015/07/07 PHP
php数组比较实现查找连续数的方法
2015/07/29 PHP
joomla实现注册用户添加新字段的方法
2016/05/05 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
微信公众号OAuth2.0网页授权问题浅析
2017/01/21 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
html数组字符串拼接的最快方法
2009/09/16 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
JS获取网页图片name属性的方法
2015/04/01 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
使用Python控制摄像头拍照并发邮件
2019/04/23 Python
详解爬虫被封的问题
2019/04/23 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
财务审计整改报告
2014/11/06 职场文书
公司员工手册范本
2015/05/14 职场文书
遗嘱范文
2015/08/07 职场文书
认识实习感想
2015/08/10 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书