前端JavaScript调用Fetch API遇CORS及302错误求助

核心问题 #

你遇到的302预检错误，本质是浏览器跨源资源共享（CORS）策略拦截了请求：当发送带自定义token头的请求时，浏览器会先发送OPTIONS预检请求，而API端对这个预检请求返回了302重定向而非200成功响应，导致浏览器直接终止后续请求。

大概率是API端的问题，具体可能原因： #

• API端存在重定向规则：比如HTTP地址强制跳转HTTPS、域名变更或路径迁移，但服务器没有正确处理OPTIONS预检请求，直接返回302。正常情况下，预检请求应得到200响应，不能被重定向。
• CORS配置不完整：API端的跨域配置未允许自定义的token请求头——需要在服务器的Access-Control-Allow-Headers响应头中明确包含token；同时要确保Access-Control-Allow-Origin允许你的前端域名。
• 认证机制变更：API端可能新增了登录校验，未通过认证的请求会被重定向到登录页，而预检请求（OPTIONS）不会携带token或认证信息，导致触发重定向。

你的尝试无效的原因： #

• 禁用跨源限制：如果是通过浏览器启动参数（比如Chrome的--disable-web-security）操作，需确保完全关闭浏览器后重新启动，否则可能不生效；且这只是临时调试手段，无法解决根本问题。
• 添加mode:'no-cors'：这种模式下，浏览器会忽略自定义请求头（包括你的token），且返回的响应是无法读取的 opaque 响应，自然拿不到有效数据，因此没用。

建议的排查步骤： #

1. 用Postman或curl直接调用API的OPTIONS方法，查看返回状态码和响应头：

   curl -X OPTIONS <你的API地址> -H "Origin: <你的前端域名>" -H "Access-Control-Request-Headers: token"
   

   如果返回302，可确认是API端的重定向或CORS配置问题。
2. 直接用GET请求调用API（携带token头），查看是否返回302：如果是，说明API本身存在重定向逻辑，需调整服务器配置，让预检请求跳过重定向。
3. 联系API维护方，确认近期是否有域名变更、CORS配置调整或认证规则更新。

内容的提问来源于stack exchange，提问作者Belen