CORS 问题 - 预检请求不允许重定向

Question

我希望得到帮助来解决我已经困扰了一段时间的问题。我正在使用 React 和 NodeJS Express 开发一个 Web 应用程序。将后端和前端部署到 Render.com 后，我购买了一个域并按以下方式配置了 DNS：

• 客户端 - https://example.com/
• 服务器 - https://api.example.com/

此问题与从客户端发出登录请求（以及任何其他请求）时出现的以下错误有关。

从源“https://www.example.com”访问“https://api.example.com/admins/login”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：预检请求不允许重定向。

在 Safari 上我收到以下消息：

预检响应不成功。状态代码：307

为了以防万一，请求本身在 Postman 中成功执行。此外，我还设法在 Render 上配置重写规则，将请求从 example.com/api/* 重写为 api.example.com/* ，设置后也会产生相同的错误。

这是我的 NodeJS CORS 配置，我使用以下几行启用了它：

至于原始链接，我很熟悉，对于某些人来说，问题是由于末尾缺少/存在斜杠引起的。我尝试了不同的方法，但没有任何效果。

const cors = require("cors");
const corsOptions ={
   origin: "https://example.com/", 
   credentials:true,         //access-control-allow-credentials:true
   optionSuccessStatus:200,
};

app.use(cors(corsOptions));

经过激烈的谷歌搜索后，我尝试按照以下方式配置cors，**这也没有帮助**

const cors = require("cors");
app.use(cors());   //also tried including my corsOptions from the previous snippet
app.options('*', cors());

最后，我尝试使用此答案中提供的自定义中间件，但这也没有帮助。 https://stackoverflow.com/a/13148080/20265378

Answer 1

作为 CORS 检查的一部分，浏览器将对您的 URL 执行“飞行前”

OPTIONS

请求（在本例中为

https://api.example.com/admins/login

）。

您收到的错误消息说明了飞行前检查失败的原因，拒绝了您的实际 API 请求：

对预检请求的响应未通过访问控制检查：预检请求不允许重定向。

还有

预检响应不成功。状态代码：307

当客户端向

https://api.example.com/admins/login

发出飞行前请求时，服务器会使用

HTTP 307 Temporary Redirect

响应代码进行响应，表明它希望客户端将请求重定向到另一个 URL。在飞行前不允许这样做 - 响应必须正确且直接从请求的目标返回。

现代 Web 服务器具有处理 CORS 飞行前请求的内置功能，因此我怀疑服务器配置错误或某些奇怪的应用程序代码导致发生此重定向。

调试：

1. 检查飞行前请求。在 Chrome 中，当“全部”或“其他”过滤器处于活动状态时，预检会在“网络选项卡”下列出：

查看响应标头并查看请求要将客户端重定向到的位置（使用

Location

标头）。这可能暗示堆栈的哪一部分导致了问题。

2. 检查您的服务器访问和应用程序日志。查找

   OPTIONS

   请求，然后再次查看重定向 URL，看看它是否响起。

   如果您正在记录应用程序请求，您可以比较日志并查看预检请求是否命中您的应用程序。如果是这样，您就知道应用程序中的某些内容正在重定向。就其价值而言，您在 Express 应用程序代码中的 CORS 配置看起来不错。

3. 检查服务器配置，假设您在服务器前端使用类似 nginx 的东西，它代理对 Express 应用程序的请求。

如果您在进一步调试尝试后发布更具体的信息，我可以将这个答案改进为更具体。