封装axios的post请求踩坑记录

今天自己封装axios请求时遇到了两个坑，所以记录一下。
第一个坑是我在代码的逻辑是只会发一次请求，但是在控制台却发现发了两次，第一次为不带参数的请求方式为options的预检请求，第二次的请求才是我真正需要发的post请求。
在经过上网查阅后发现是由于跨域请求引起的，而在跨域请求中，由于浏览器的限制，在发送非简单请求时浏览器会增加一个预检请求（即上图中的方法为OPTIONS的请求）。当预检请求通过时才会发送真正的请求。

浏览器会将CORS请求分成两类：简单请求 和 非简单请求。而判断一个请求是简单请求还是非简单请求也很简单：
1、请求方式：HEAD，GET，POST
2、请求头信息：

• Accept
• Accept-Language
• Content-Language
• Last-Event-ID
• Content-Type：仅限于这三个的其中一个（application/x-www-form-urlencoded、multipart/form--data、text/plain）

只有同时满足以上两个条件时，这个请求才是简单请求，否则就是非简单请求。由于我在项目中使用的响应头是application/json，所以它是一个非简单请，因此在控制台上可以看到发起了两个请求。

解决方法
我们把请求头的Content-Type设置为application/x-www-form-urlencoded即可解决。这样发起的请求就是一个简单请求了，浏览器就不会增加一个预检请求。

但是在改了请求头后我遇到了第二个坑，就是我在post请求的参数data在请求时变成了另一个对象的键
前端控制台看到的

后端打印的

查阅后发现可以引入qs库将表单数据格式化为URL编码形式来解决，最终的封装方法如下图