如何解决CORS预检请求不允许重定向的访问控制检查报错？

1 修正前端代码的错误配置 #

你当前的fetch请求头中错误添加了Access-Control-Allow-Origin、Access-Control-Allow-Credentials字段，这些都是服务端返回响应时需要携带的响应头，完全不应该在前端请求头中配置，额外添加这些字段会导致请求触发不必要的预检，甚至被服务端直接拒绝。另外你在headers中声明method: "POST"也是冗余错误配置，fetch的method参数已经单独声明了请求方法，不需要重复写在请求头中。

修正后的前端代码如下：

let response = await fetch(ApiUrlConstant.getApiFullUrl("web.contact"), {
  method: "POST",
  headers: {
    "Content-Type": "application/json;charset=utf-8"
  },
  body: JSON.stringify(details),
});
setStatus("Submit");
let result = await response.json();
alert(result.status);

2 解决预检请求重定向问题 #

报错明确说明预检请求被重定向触发了CORS拦截，按照以下两点排查即可：

• 首先确认ApiUrlConstant.getApiFullUrl("web.contact")返回的地址是否已经是https://api.example.com/contact，如果返回的还是http开头的地址，服务端配置的HTTP强制跳转HTTPS规则会让预检的OPTIONS请求触发3xx跳转，直接导致该报错，把前端配置的API基础地址改为HTTPS开头即可解决。
• 如果API地址已经是HTTPS开头，需要调整服务端配置：单独对OPTIONS预检请求做处理，不要让OPTIONS请求匹配到任何3xx跳转规则，同时给OPTIONS请求返回正确的CORS响应头：
  • Access-Control-Allow-Origin: https://www.example.com
  • Access-Control-Allow-Methods: POST, OPTIONS
  • Access-Control-Allow-Headers: Content-Type
    处理完直接给OPTIONS请求返回200状态码即可，不要做任何跳转逻辑。

3 额外排查项 #

如果完成上述配置后仍然报错，检查服务端安装的SSL证书是否是正规CA签发的有效证书，不要使用自签证书，否则浏览器会直接拦截跨域请求。

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