解决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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
用javascript来实现动画导航效果的代码
Dec 16 Javascript
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
Jun 24 Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 Javascript
js 中获取制定的cook信息实现方法
Nov 19 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
angular.js实现列表orderby排序的方法
Oct 02 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 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模板原理讲解
2013/11/13 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
PHP 图片处理
2020/09/16 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
jquery 列表双向选择器之改进版
2013/08/09 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
Bootstrap模仿起筷首页效果
2016/05/09 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
Angular封装搜索框组件操作示例
2019/04/25 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
javascript移动端 电子书 翻页效果实现代码
2019/09/07 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
解析Python中的eval()、exec()及其相关函数
2017/12/20 Python
python 自定义对象的打印方法
2019/01/12 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
Python发送邮件实现基础解析
2020/08/14 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
大学生党员批评与自我批评范文
2014/10/14 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS