解决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判断元素为数字的奇异写法分享
Aug 01 Javascript
document.write的几点使用心得
May 14 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
Sep 15 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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中simplexml_load_string使用实例分享
2014/02/13 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
javascript读写json示例
2014/04/11 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
JavaScript函数Call、Apply原理实例解析
2020/02/17 Javascript
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
详解JavaScript自定义函数
2020/07/29 Javascript
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
python每隔N秒运行指定函数的方法
2015/03/16 Python
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
python字符串的index和find的区别详解
2020/06/20 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
Python实现扫码工具的示例代码
2020/10/09 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
祖国在我心中的演讲稿
2014/05/04 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
英文自荐信范文
2015/03/25 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
Python数组变形的几种实现方法
2022/05/30 Python