对CORS OPTIONS预检请求的一些思考

前后端分离模大势所趋，跨域问题更是老生常谈。

《程序员应对浏览器同源策略的姿势》一文提到三种跨域请求方案，重点讲述了w3c和浏览器厂商推出的CORS规范。

同源策略 所谓同源是指域名、协议、端口相同。不同源的浏览器脚本(javascript、ActionScript、canvas)在没有明确授权的情况下，不能读写对方的资源, 这是浏览器最基本的安全规范。

CORS是w3c和浏览器厂商为解决跨域资源共享问题而推出的标准方案：

浏览机器一旦发现跨域请求，就会自动添加一些附加的头信息，有时还会多出一次附加的请求(浏览器自动完成，用户不会察觉)，服务器响应特定标头Access-Control-，体现对跨源访问的授权态度。

今天我主要想要聊一聊CORS中的预检请求

当前端使用脚本请求一个跨域资源时，如果是非简单请求(下文会解释)，浏览器会自动帮你先发出一个OPTIONS查询请求，称为预检(cors-preflight-request)，作用是询问服务器当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段；只有得到肯定答复，浏览器才会发出正式的跨域请求。

"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。

该请求header中会包含以下两个字段：

Access-Control-Request-Method: 该字段的值对应当前请求类型，例如 GET、POST、PUT等等。浏览器会自动处理。
Access-Control-Request-Headers: 该字段的值对应当前请求可能会携带的额外的自定义header字段名，多个字段用逗号分割。浏览器会自动处理，将请求中非简单的header字段全部列出来，例如标识请求流水的x-request-id，用于Auth鉴权的Authorization 字段。

对于OPTIONS请求，按照规范实现的服务端会响应一组HTTP header，但不会返回任何实体内容。如果服务端支持该跨域请求，建议返回204状态码(返回200也可以)；如果不支持，建议返回403状态码(返回404或其他错误状态码也可以)。

响应的header可以包含以下字段：

Access-Control-Allow-Origin: 允许哪些域被允许跨域，例如 http://qq.com 或 https://qq.com，或者设置为* ，即允许所有域访问
Access-Control-Allow-Credentials: 是否携带票据访问(对应fetch方法中credentials)，当该值为true时，Access-Control-Allow-Origin 不允许设置为*
Access-Control-Allow-Methods: 标识该资源支持哪些方法，例如：POST, GET, PUT, DELETE
Access-Control-Allow-Headers: 标识允许哪些额外的自定义 header 字段和非简单值的字段
Access-Control-Max-Age: 表示可以缓存Access-Control-Allow-Methods和Access-Control-Allow-Headers提供的信息多长时间，单位秒，由服务端和浏览器默认值共同决定。
Access-Control-Expose-Headers: 通过该字段指出哪些额外的 header 可以被支持。

由此可见，当触发预检时，一次AJAX请求会消耗掉两个TTL，严重影响性能。

那么如何节省掉OPTIONS请求来提升性能呢？从上文可以看出，有两个方案：

发出简单请求

只要同时满足以下两个条件，就属于简单请求
(1)使用下列方法之一：

head
get
post

(2)请求的Heder是

Accept
Accept-Language
Content-Language
Content-Type: 只限于三个值：application/x-www-form-urlencoded、multipart/form-data、text/plain

不同时满足上面的两个条件，就属于非简单请求。很明显，我们常见的Post请求且Content-Type=application/json也属于非简单请求，也会触发预检请求。

> 如果不方便改造为简单请求，只有使用方案2了。

服务器端设置Access-Control-Max-Age字段

当第一次请求该URL时会发出OPTIONS请求，浏览器会根据返回的Access-Control-Max-Age字段缓存该OPTIONS预检请求的响应结果。在缓存有效期内，该资源的请求（URL和header字段都相同的情况下）不会再触发预检。(chrome 打开控制台可以看到，当服务器响应Access-Control-Max-Age时只有第一次请求会有预检，后面不会了。注意要开启缓存，去掉disable cache勾选)

但是要注意的是，该缓存只针对这一个请求 URL 和相同的 header，无法针对整个域或者模糊匹配 URL 做缓存（当然也可以考虑封装一下，固定一个接口地址，传不同的body内容)。

以上便是对CORS OPTIONS预检请求的一些思考，希望对同学们有所帮助！

最后是Abp vNtext配置CORS的示例：

private void ConfigureCors(ServiceConfigurationContext context, IConfiguration configuration)
{context.Services.AddCors(options =>{// 无阻塞跨域options.AddPolicy(DefaultCorsPolicyName, builder =>{builder.SetIsOriginAllowed(_ => true).AllowCredentials().AllowAnyHeader().WithMethods(HttpMethods.Get, HttpMethods.Post, HttpMethods.Put, HttpMethods.Delete).SetPreflightMaxAge(TimeSpan.FromHours(24));});});
}

- https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age

- 程序员应对浏览器同源策略的姿势

MSDN二维码.jpg