解决axios会发送两次请求,有个OPTIONS请求的问题
问题描述：
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';
可是问题又来了
后台不认这个数据格式啊...
所以在传递的时候必须先把数据转换格式
这时候我们需要用到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请求的问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了微信小程序使用npm支持踩坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
本文主要给大家分享一下在编写JavaScript代码的时候存在的一些方法和技巧，虽然有时候条条大路都通向罗马，但是也许总会有那么一条最短的路径可走。希望通过以下几点JavaScript技巧让大家的代码“化繁为简，化简为精”2017-05-05
IE不出现Flash激活框的小发现的js实现方法...2007-09-09
正则表达式删除JavaScript代码中的空格、注释和换行符
这篇文章主要介绍了正则表达式删除JavaScript代码中的空格、注释和换行符,需要的朋友可以参考下2023-12-12
js模仿php中strtotime()与date()函数实现方法
这篇文章主要介绍了js模仿php中strtotime()与date()函数实现方法,涉及javascript时间操作的相关技巧,非常具有实用价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了javascript实现类似于新浪微博搜索框弹出效果的方法,涉及javascript弹出搜索框的相关实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
Promise是异步编程的一种解决方案,比传统的解决方案回调函数和事件更合理且更强大,这篇文章主要给大家介绍了关于如何一步步实现一个简易promise的相关资料,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了ES6基础之展开语法(Spread syntax)，主要介绍了扩展语法的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
Uniapp 是一款跨平台开发框架,可以同时开发出可以在多个平台上运行的应用,在开发过程中,我们常常需要自定义导航栏来满足 UI 设计的需求,本文将介绍如何在 Uniapp 中自定义导航栏并自适应不同机型的屏幕大小,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了利用JS来控制键盘的上下左右键示例代码。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
最新评论