node.js Express \ React 前端 - 如何正确设置 Access-Control-Allow-Headers 以避免 CORS 策略预检失败

Question

这个问题在开发过程中出现，应用程序从工作状态变为不工作状态，而无需更改其代码；更新后我的浏览器设置可能发生了一些变化。

但是，我需要在应用程序/后端纠正此问题，而不是期望用户禁用任何浏览器功能，但即使在阅读了有关 CORS 的多篇文章后，也无法弄清楚如何执行此操作。

node.js 后端：

const app = express();
app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,DELETE");
  res.setHeader("Access-Control-Allow-Headers", "Content-Type,Authorization");
  console.log("req received, res headers set.");
  next();
});

反应前端：

try {
    const response = await fetch(`${backenduri}/` + mode, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(authData),
    });
......

目前允许所有来源 - 我知道这对于生产来说是不可接受的，稍后将添加特定的白名单。

POST 方法也是允许的 - 我读到 POST 请求通常不会导致预检请求检查，所以现在认为它是由反应请求上的自定义标头触发的，该标头在 Content-Type 中也存在不匹配。

我尝试在 res.setHeader("Access-Control-Allow-Headers" 中设置多个 Content-Types，或者只是从 Authorization 更改为 application/json 但都没有解决问题。

例如

res.setHeader(
    "Access-Control-Allow-Headers",
    "Content-Type,application/json",
  );

和

res.setHeader("Access-Control-Allow-Headers", [
    "Content-Type,Authorization",
    "Content-Type,application/json",
  ]);

1. 任何人都可以建议使用 Node Express、response.setHeader("...etc) 为 Access-Control-Allow-Headers 设置多个内容类型的正确语法吗？

2. 任何人都可以建议如何更详细地调查预检请求响应，如果这有助于确认我是否正在尝试解决正确的问题？

Answer 1

为了允许“Access-Control-Allow_Headers”中存在多个标头，请尝试使用逗号将其分开，如下所示，我更正了该标头， res.setHeader("Access-Control-Allow-Headers" , "内容类型，授权");

如果想要包含其他标头，例如“application/json”，那么也可以包含如下标头， res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, application/json")

注意 - 确保包含前端在请求中发送的所有标头。为了检查预检请求和响应，通过使用浏览器开发人员工具检查预检请求（选项）及其响应。尝试执行上述解决方案，希望有效！