axios发送两次请求及遇到的坑

在以前的Vue项目商城中，使用axios组件做数据请求，在页面交互中发现会发送两次网络请求，因为没有造成什么影响，一直也没有追究原因。在一个新的项目中，需要加入请求头Token判断是否需要登录，因为后台没有做任何限制，在第一次请求时，后台就返回需要登录，那同事也不知道什么原因，一直说是请求没有传Token，百度才发现原因。

一.两次请求方式原因：

浏览器将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。

只有同时满足以上两个条件时,才是简单请求,否则为非简单请求。 非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

即：浏览器会首先使用 OPTIONS 方法发起一个预请求，判断接口是否能够正常通讯，如果不能就不会发送真正的请求过来，如果测试通讯正常，则开始真正的请求。

因为我们项目中使用的是GET,POST请求，Content-Type使用默认：application/json;charset=UTF-8。所以会发送一次预请求和一次正式请求两次请求。

二.解决方法

1.前端把非简单请求改为简单请求。 我们把Content-Type使用默认：application/json;charset=UTF-8。修改为application/x-www-form-urlencoded，即可转化为简单请求，但是测了之后发现后台并不识别这种请求格式，需要数据格式转化。 (1). npm install qs (2).在main.js中引入qs模块

import qs from 'qs'
Vue.prototype.$qs = qs

(3).转化格式

this.$axios
     .post("http://xxx/", 
        this.$qs.stringify(postData)
      ).then(data => {
        if (data.data.status != 200) {
          //xxx
        } else {
          //xxx
        }
      });

注意：config.headers.Authorization携带了token的情况仍然是非简单请求。

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

推荐方法2，服务端拦截的方法！