fetch预请求场景:前端直接从oss远程链接下载文件流,浏览器直接打开可以下载。fetch请求报403.

201 阅读2分钟

场景:前端直接从oss远程链接下载文件流,浏览器直接打开可以下载。fetch请求报403. 知识点: fetch 会在某些情况下发送 OPTIONS 预请求。这是因为 fetch 遵循 CORS (Cross-Origin Resource Sharing) 规范,在跨域请求时可能会触发 OPTIONS 预请求。这种请求也被称为 "preflight" 请求。 什么时候会触发 OPTIONS 预请求? 当你使用 fetch 或 XMLHttpRequest 发起跨域请求,且满足以下条件之一时,浏览器会先自动发送一个 OPTIONS 请求来探测目标服务器是否允许该实际请求:

  1. 请求方法是 PUT、DELETE、PATCH 或其他不属于简单请求的方法(如 POST、GET 和 HEAD)。
  2. 请求包含自定义的请求头,例如 Content-Type 为 application/json,或你手动添加了其他非标准请求头。
  3. 请求的 Content-Type 不是以下三种简单的 MIME 类型之一:
  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded 为什么发送 OPTIONS 预请求? 浏览器在发出实际请求之前,会先通过发送 OPTIONS 预请求来“询问”服务器是否允许该请求。这是为了确保跨域请求的安全性。如果服务器在响应中返回允许的跨域访问控制头(如 Access-Control-Allow-Origin),浏览器才会继续发送实际请求。 如何避免 OPTIONS 预请求? 在某些情况下,你可能希望避免 OPTIONS 预请求,以减少网络开销。以下是一些可以避免 OPTIONS 预请求的做法:
  1. 使用“简单请求”:
  • 仅使用 GET、POST 或 HEAD 请求方法。
  • 请求头仅包含:
    • Accept
    • Accept-Language
    • Content-Language
    • Content-Type,且 Content-Type 的值为 text/plain、multipart/form-data 或 application/x-www-form-urlencoded。
  1. 在服务器端配置 CORS 允许策略:
  • 确保服务器在响应中正确设置了 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 等头部。
  1. 使用同源请求: 如果请求不涉及跨域,则不会触发 OPTIONS 预请求。 结论 fetch 确实会在满足特定条件时发送 OPTIONS 预请求。这个过程由浏览器自动处理,主要目的是确保跨域请求的安全性。

解决方案:去除自定义'content-type',避免触发options预请求,403报错解决