重复了两次axios请求,如何避免options请求 ??

前端用 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'],
}))
阅读 8.4k
5 个回答

由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

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

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏