axios发送两次请求原因及解决方法

使用axios每次都会产生两次网络请求，第一次是Request Method为OPTIONS的请求，询问服务器是否有访问权限， 如果有，则再次请求数据。
所以首先我们要知道，这不是bug，而是由于跨域通讯造成的，是符合w3c标准的。


CORS两种请求
　　浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

只要同时满足以下两大条件，就属于简单请求。
　　（1) 请求方法是以下三种方法之一：
HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同时满足上面两个条件，就属于非简单请求。

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

两次请求原因
　　前后端未满足“同源策略/SOP”，俗称请求跨域。浏览器一旦发现请求跨域，就会使用CORS通信，自动添加一些附加的头信息，简单请求只会有一次请求，只有非简单请求会附加一次请求。

解决方法
　　服务期端直接通过“预检”请求，服务器新建拦截器，拦截所有请求，筛选所有Requset Method:OPTIONS的请求，不做任何处理直接返回即可。（后端处理）

参考：https://www.cnblogs.com/itmrzhang/p/11003474.html