axios请求接口发起两次请求（OPTIONS 与POST/GET）

     使用axios发现每次调用接口都会有两个请求，第一个请求时OPTIONS请求，只有OPTIONS请求通过才会发送实际的请求。

     为什么XMLHttpRequest的POST请求会变OPTIONS请求－XMLHttpRequest对象对HTTP请求的访问控制（CORS跨站资源共享）；HTTP访问控制（CORS）；通过这两篇文章可以知道什么是OPTIONS请求，如果要避免OPTIONS请求，则需要把预检请求改为简单请求；先看看简单请求和预检请求的条件。

简单请求：满足以下所有条件，即视为简单请求

• 使用下列方法之一：
  • GET
  • HEAD
  • POST
• Fetch 规范定义了对 CORS 安全的首部字段集合，不得人为设置该集合之外的其他首部字段。该集合为：
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type （需要注意额外的限制）
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
• Content-Type 的值仅限于下列三者之一：
  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded
• 请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。
• 请求中没有使用 ReadableStream 对象。

预检请求：当请求满足下述任一条件时，即应首先发送预检请求

• 使用了下面任一 HTTP 方法：
  • PUT
  • DELETE
  • CONNECT
  • OPTIONS
  • TRACE
  • PATCH
• 人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。该集合为：
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type (but note the additional requirements below)
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
•  Content-Type 的值不属于下列之一:
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
• 请求中的XMLHttpRequestUpload 对象注册了任意多个事件监听器。
• 请求中使用了ReadableStream对象。

如何避免预检请求呢？如何把预检请求改为简单请求呢？

1、不设置自定义请求头；

2、'Content-Type'设置为'application/x-www-form-urlencoded'；

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

3、把json格式的data参数用qs序列化成字符串；

import axios from 'axios'
import config from '@/config'
import * as util from 'utils/common'
import qs from 'querystring'
let localUser = util.session('token')
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
const instance = axios.create({
  timeout: config.timer.connTimeout * 1000,
  // 返回数据类型
  responseType: 'json',
  // 表明是否有跨域请求
  withCredentials: false
})

//添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  let data = config.data
  if (data) {
    localUser && localUser.token && (data.token = localUser.token)
  }
  let request = {}
  request.jsondata = JSON.stringify(data)
  request = qs.stringify(request)
  config.data = request
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 错误处理
instance.interceptors.response.use(function (response) {
  return response
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

export default instance

       其实我们没有必要去避免OPTIONS请求，在实际项目中未必都是简单请求，也不是所有预检请求都可以转为简单请求，只需要后台配合设置一下跨域响应头部就可以解决了。

response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,PUT,DELETE");
response.setHeader(“Access-Control-Allow-Headers”, “x-requested-with,Authorization，Content-Type”);