环保网站 中企动力建设,二级域名著名网站,郑州高端网站建设团队,装修网站模板前后端分离模大势所趋#xff0c;跨域问题更是老生常谈。《程序员应对浏览器同源策略的姿势》一文提到三种跨域请求方案#xff0c;重点讲述了w3c和浏览器厂商推出的CORS规范。同源策略 所谓同源是指域名、协议、端口相同。不同源的浏览器脚本(javascript、ActionScript、ca… 前后端分离模大势所趋跨域问题更是老生常谈。《程序员应对浏览器同源策略的姿势》一文提到三种跨域请求方案重点讲述了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, DELETEAccess-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)使用下列方法之一headgetpost(2)请求的Heder是AcceptAccept-LanguageContent-LanguageContent-Type: 只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain不同时满足上面的两个条件就属于非简单请求。很明显我们常见的Post请求且Content-Typeapplication/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- 程序员应对浏览器同源策略的姿势关注并星标我们更多干货及最佳实践分享
