解决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 相关文章推荐
javascript编程起步(第四课)
Jan 10 Javascript
番茄的表单验证类代码修改版
Jul 18 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
Mar 04 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
七个很有意思的PHP函数
May 12 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
vue2单元测试环境搭建
May 24 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
php计算给定日期所在周的开始日期和结束日期示例
2017/02/06 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
js parseInt("08")未指定进位制问题
2010/06/19 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
webpack+vue.js实现组件化详解
2016/10/12 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
Electron实现应用打包、自动升级过程解析
2020/07/07 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python错误处理详解
2014/09/28 Python
python访问抓取网页常用命令总结
2017/04/11 Python
python一键去抖音视频水印工具
2018/09/14 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
Columbia Sportswear法国官网:全球户外品牌
2020/09/25 全球购物
函授教育个人学习的自我评价
2013/12/31 职场文书
自荐信需注意事项
2014/01/25 职场文书
保险专业求职信
2014/07/07 职场文书
离婚协议书范文2014
2014/10/16 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书