DOOFOX BLOG

4 月 24 2018 Category:

前端跨域请求时的 预检请求(Preflight request) 效率优化

前后端分离项目在前端跨域请求时,将会在每次接口调用时触发一次 options 请求,它就是所谓的预检请求,具体的作用在此不做阐述。本文的优化方法基于 nginx ,不过程序也可实现此优化方式。

Nginx 配置优化

在前端请求时,通过 nginx 直接返回预检结果比在程序中运行并返回预检结果的效率要更高一些,所以本文对预检的优化实现在 nginx 的配置中,在判断到用户请求 method 为 options 时,直接 return 200; 以告知浏览器预检通过,至于其他的相关限制,例如请求方式,允许的请求头参数,请求来源等,可以通过 add_header 进行实现。

* Access-Control-Max-Age 参数表示对预检的请求时间间隔,如果不设置此参数,将会在每次接口调用时都进行一次预检,此配置可以适当调节的高一些,本文参数时间设置为 一个月

if ( $request_method = 'OPTIONS' ) {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Max-Age' '604800';
      add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
      add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Access-Token,Blog-ID';
      return 200;
}

相关文献

MDN Web docs – Preflight request

Recommended to

+2
7+ 2+
  • doofox

    5:34 下午

    例如 使用 Node.js 的 Egg 框架时,也可以配置相关的 header,以实现预检优化,参数相同。🚗

  • 99423248

    11:05 下午

    nice

浙ICP备17013116号-1