重复了两次axios请求，如何避免options请求 ？？

Question

前端用 axios 请求,在headers 中添加了 token 之后就多了一次options请求（不添加token时无options请求）。服务器用的是 node+koa （koa2-cors配置的跨域）,搜了相关文章是说是因为自定义了headers ，需要服务器添加配置允许 Authorization 字段！ 配置了之后，但还是有两次请求！大神们帮我瞧瞧！

/** 
 * 请求拦截器 
 * 每次请求前，如果存在token则在请求头中携带token 
 */ 
instance.interceptors.request.use(    
  config => {        
      const token = store.state.token;  
      config.headers.Authorization = token
      return config;    
  },    
  error => Promise.reject(error))

app
//跨域
.use(cors({
     origin: function (ctx) {
             if (ctx.url === '/test') {
                 return "*" // 允许来自所有域名请求
             }
             return 'http://localhost:8888' // 这样就能只允许 http://localhost:8080 这个域名的请求了
         },
         credentials: true,
         allowMethods: ['GET', 'POST', 'DELETE'],
         allowedHeaders: [ 'Content-Type', 'Authorization', 'Accept', 'X-Requested-With'],
}))

Answer 1

由CORS引发的option请求，是一种探测性的请求，通过这个方法，客户端可以在采取具体资源请求之前，觉得采取什么样的请求方式或者了解服务器性能。在ajax跨域请求时，如果请求的是json，或者一些其他‘非简单请求’，此时需要提前发出一次options请求，这个是浏览器行为。

对于你的请求，由于设置了header.Authorization，可能你们是用这种方式让服务器校验token的，因此这个请求就是非简单请求了，应该无法避免。只有简单请求才不会额外进行一次option请求。

这里补充一下网上找的资料：
同时满足下列三大条件，就属于简单请求，否则属于非简单请求
1.请求方式只能是：GET、POST、HEAD
2.HTTP请求头限制这几种字段：Accept、Accept-Language、Content-Language、Content-Type、Last-Event-ID
3.Content-type只能取：application/x-www-form-urlencoded、multipart/form-data、text/plain

Answer 2

补充一下：怕性能，可以考虑让服务端再发一条，Access-Control-Max-Age: 86400。

Answer 3

app.use(cors({
      maxAge: 86400, //Access-Control-Max-Age 字段指定了预检请求的结果能够被缓存多久，单位秒
}))

在之前的基础上加上 maxAge 可以缓存options请求,请求发送一次options请求之后就会缓存一段你设置的时间,接着就不会出现这个请求的options的请求了

Answer 4

options是请求服务器端是否能跨域...

Answer 5

option 是浏览器发出的，只要是跨域都会发出，用于判断资源是不是可以被请求到，这个去不掉，为啥一定要去掉呢？