解决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 相关文章推荐
jquery获得keycode的示例代码
Dec 30 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
微信小程序实现滑动翻页效果(完整代码)
Dec 06 Javascript
JavaScript如何利用Promise控制并发请求个数
May 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
各种战术和打法的原创者
2020/03/04 星际争霸
php 使用post,get的一种简洁方式
2010/04/25 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
js 如何实现对数据库的增删改查
2012/11/23 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
Python中关键字is与==的区别简述
2014/07/31 Python
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
Django 解决开发自定义抛出异常的问题
2020/05/21 Python
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
如何用JQuery进行表单验证
2013/05/29 面试题
水利水电专业自荐信
2014/07/08 职场文书
2015年招聘工作总结
2014/12/12 职场文书
毕业论文指导教师评语
2014/12/30 职场文书
2015年打非治违工作总结
2015/04/02 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android