解决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 new 需不需要继续使用
Jul 02 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
js实现交换运动效果的方法
Apr 10 Javascript
高效利用Angular中内置服务$http、$location等
Mar 22 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 Javascript
新手入门js闭包学习过程解析
Oct 08 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
用JavaScript显示随机图像或引用
2009/04/21 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
2013/04/10 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
使用Python的内建模块collections的教程
2015/04/28 Python
详解Python中for循环是如何工作的
2017/06/30 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Django之模型层多表操作的实现
2019/01/08 Python
WxPython建立批量录入框窗口
2019/02/27 Python
详解用python写一个抽奖程序
2019/05/10 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
佛罗里达州印第安河新鲜水果:Hale Groves
2017/02/20 全球购物
德国机车企业:FC-Moto
2017/10/27 全球购物
回门宴新郎答谢词
2014/01/12 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
计算机科学系职业生涯规划书
2014/03/08 职场文书
明信片寄语大全
2014/04/08 职场文书
2014年副班长工作总结
2014/12/10 职场文书
婚姻出轨保证书
2015/05/08 职场文书
千手观音观后感
2015/06/03 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript