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

Question

我正在 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.

我也在服务器端使用节点快递。

有没有办法解决？

Answer 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();
    });