本地主机上的预检响应错误中的 Access-Control-Allow-Headers答案

【问题标题】：Access-Control-Allow-Headers in preflight response error while on localhost本地主机上的预检响应错误中的 Access-Control-Allow-Headers
【发布时间】：2021-03-31 22:25:01
【问题描述】：

我正在 localhost:3000 上开发我的 React 应用程序并使用以下代码：

try {
  const response = await fetch('https://myendpoint.com/abcd/search?c=abc123', {
    headers: { 'Content-Type': 'application/json' }
  });
  const jsonData = await response.json();
  console.log(jsonData);
} catch (err) {
  console.error(err.message);
}

从客户端运行此代码时，我收到以下错误：

from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

我也在服务器端使用 node express。

这里面还有吗？

【问题讨论】：

你在你的 api 中使用 cors() 吗？
是对你的 api 还是其他 api 的 fetch 调用？
它实际上是另一个 api。有关如何将呼叫转移到服务器并为此呼叫更改客户端的任何帮助？

标签： javascript node.js reactjs express fetch

【解决方案1】：

您可以在所有路线之上完全使用此代码。因此，服务器上来自外部主机的每个请求都会转到此请求，然后在附加这些标头后，您的第一个与请求 URL 匹配的下一个路由将运行。

    app.use(function (req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
        next();
    });

【讨论】：