XHR是传统的数据请求方式,而 Fetch API 则代表了现代Web开发的新兴标准。
fetch和XMLHttpRequest(XHR)在处理跨域请求时的行为有所不同。
# fetch
fetch默认不发送OPTIONS请求。
如果需要发送OPTIONS请求,需要显式地创建一个OPTIONS请求并使用fetch发送。
# XMLHttpRequest (XHR)
XHR在跨域请求时浏览器会先发送OPTIONS请求,以检查服务器是否允许实际请求跨域访问资源。
这是浏览器的一种安全措施,确保服务器知道请求的方法、来源和头部是安全的。
预检请求(Preflight Request):在实际的跨域请求之前,浏览器会首先发送一个 OPTIONS 请求,以检测服务器是否支持真实的跨域请求。
这个 OPTIONS 请求中会携带以下请求头信息:
Access-Control-Request-Headers:告知服务器实际请求可能携带的自定义请求头字段。
Access-Control-Request-Method:告知服务器实际请求所使用的 HTTP 方法。
服务端响应:
服务端需要设置响应头,以允许跨域请求。以下是一些关键的响应头字段
Access-Control-Allow-Methods: 返回服务端允许的请求方法,包括 GET、HEAD、PUT、PATCH、POST、DELETE 等。
Access-Control-Allow-Credentials:允许跨域携带 cookie(如果跨域请求需要携带 cookie,这个字段必须设置为 true)。
Access-Control-Allow-Origin: 允许跨域请求的域名,可以在服务端配置信任的域名白名单。
Access-Control-Allow-Headers: 允许跨域携带自定义请求头。
参考:https://www.cnblogs.com/magicg/p/13670213.html
########################################################################################
在配置 aws cloudfront 时要注意两种 “缓存键和源请求” 的区别!!!
这两个标头,需要被 CloudFront 正确的转发至 S3,才能使有 OPTIONS 的跨域成功被满足。然而恰巧两种「缓存键和源请求」对于处理这个标头的方式不同:
1. 使用 Cache policy and origin request policy (recommended),缓存策略是 CachingOptimized、源请求策略 无。
这样的配置会让 CloudFront 过滤掉以上两个 Access-Control-* 标头。
参考基准:当使用 Cache policy and origin request policy,需参考文档 [1] 的表格,确认您需要转发的标头是否在表格中、且是否默认会被转发。
然而 Access-Control-* 属于表格中第一列「其他定义的标头」,行为会是:被过滤。
解决方式:使用「源请求策略」功能,选择「CORS-S3Origin」,配置完成后刷新缓存(失效)。
2. 使用 Legacy cache settings,也就是「旧缓存设置」,旧缓存设置的行为,如同表格 [1] 第一列「其他定义的标头」提到的,「旧缓存设置 会使 CloudFront 将标头转发到源」,因此您使用旧缓存设置的时候,不用额外多做配置就可以将 Access-Control-* 转发到源,使 OPTIONS 成功。
因此建议您当使用 Cache policy and origin request policy 时需要额外注意标头是否被转发,并使用「源请求策略」来放行特定标头,以 CORS 跨域来说选择「CORS-S3Origin」并清理下缓存即可让 OPTIONS 成功。
或者是直接使用「旧缓存设置」也可以达成您的需求。
文档1:https://docs.aws.amazon.com/zh_cn/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html#request-custom-headers-behavior