关于axios会发送两次要求，有个OPTIONS要求的题目

2019年8月22日 209次阅读 来源: 你响度讲D咩嘢

当时项目为了处理这个题目自闭了一个下昼…..上网找了许多的文章看，险些都没有根治要领，然则末了照样被我搞定了
[]~(￣▽￣)~*　

题目形貌：

Vue的开发者都晓得axios，许多都用axios来举行数据交互，axios的默许要求头是Content-Type: application/json
运用这个要求头会涌现向服务器要求两次的状况
为何呢？

原因是：浏览器会起首运用 OPTIONS 要领提议一个预要求，推断接口是不是能够一般通信，假如不能就不会发送真正的要求过来，假如测试通信一般，则最先真正的要求。

也许意义就是：
浏览器对背景说：我能够要求你吗？ (￣ˇ￣)　
背景说：阔以。(￣▽￣)~*
结果是：发送原有的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
        }
      });

如许就圆满处理题目，减少了对服务器的要求，减轻了对服务器的压力，最主要的是可！以！传！

假如有什么疑问迎接留言，有毛病或许有更简朴的要领迎接鼎力大举指出

    原文作者：你响度讲D咩嘢
    原文地址: https://segmentfault.com/a/1190000016040998
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞