解决 axios 跨域 Request Method: OPTIONS问题(预检请求)

使用 axios 进行跨域进行跨域请求时有时会遇到，同一个接口请求了两次，并且第一次都是options请求，然后才是post/get请求

为什么会出现这种原因呢？

这是因为CORS跨域分为：简单跨域请求 和 复杂跨域请求

简单跨域不会发送options请求，复杂跨域会发送一个预检请求options

1. 简单跨域满足的条件

请求方式是以下三种之一：

1. HEAD

2. GET

3. POST

HTTP的头信息不超出以下几种字段：

1. Accept

2. Accept-Language

3. Content-Language

4. Last-Event-ID

5. Content-Type

Content-Type的值，只限于三个值：

1. application/x-www-form-urlencoded
2. multipart/form-data
3. text/plain

2. 复杂跨域满足的条件

• 请求方法不是GET/HEAD/POST 
• post请求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain 
• 请求设置了自定义的header字段，在header中自定义了字段就会触发options预检请求

// 请求拦截器
service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['Content-MD5'] = 'MD5'
      config.headers['authToken'] = getToken()
      config.headers['accessTokenRetireTime'] = getTokenTime()
    }
 
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

3. 解决方案 

 要解决此类问题共分三步(某个特定请求级别): 都是服务器那边配置 

1.  Allow-Method 允许 OPTIONS方式

2. Access-Control-Allow-Origin 对其他域名开放

3.  Access-Control-Allow-Headers 添加CompanyId,TrackId等需要允许通过的字段