场景:前端直接从oss远程链接下载文件流,浏览器直接打开可以下载。fetch请求报403. 知识点: fetch 会在某些情况下发送 OPTIONS 预请求。这是因为 fetch 遵循 CORS (Cross-Origin Resource Sharing) 规范,在跨域请求时可能会触发 OPTIONS 预请求。这种请求也被称为 "preflight" 请求。 什么时候会触发 OPTIONS 预请求? 当你使用 fetch 或 XMLHttpRequest 发起跨域请求,且满足以下条件之一时,浏览器会先自动发送一个 OPTIONS 请求来探测目标服务器是否允许该实际请求:
- 请求方法是 PUT、DELETE、PATCH 或其他不属于简单请求的方法(如 POST、GET 和 HEAD)。
- 请求包含自定义的请求头,例如 Content-Type 为 application/json,或你手动添加了其他非标准请求头。
- 请求的 Content-Type 不是以下三种简单的 MIME 类型之一:
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded 为什么发送 OPTIONS 预请求? 浏览器在发出实际请求之前,会先通过发送 OPTIONS 预请求来“询问”服务器是否允许该请求。这是为了确保跨域请求的安全性。如果服务器在响应中返回允许的跨域访问控制头(如 Access-Control-Allow-Origin),浏览器才会继续发送实际请求。 如何避免 OPTIONS 预请求? 在某些情况下,你可能希望避免 OPTIONS 预请求,以减少网络开销。以下是一些可以避免 OPTIONS 预请求的做法:
- 使用“简单请求”:
- 仅使用 GET、POST 或 HEAD 请求方法。
- 请求头仅包含:
- Accept
- Accept-Language
- Content-Language
- Content-Type,且 Content-Type 的值为 text/plain、multipart/form-data 或 application/x-www-form-urlencoded。
- 在服务器端配置 CORS 允许策略:
- 确保服务器在响应中正确设置了 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等头部。
- 使用同源请求: 如果请求不涉及跨域,则不会触发 OPTIONS 预请求。 结论 fetch 确实会在满足特定条件时发送 OPTIONS 预请求。这个过程由浏览器自动处理,主要目的是确保跨域请求的安全性。
解决方案:去除自定义'content-type',避免触发options预请求,403报错解决