时间戳

首页 > 解决方案 > React / Typescript：尽管遵循所有常见解决方案，但 Axios 跨域 POST 请求 CORS 错误

node.js - React / Typescript：尽管遵循所有常见解决方案，但 Axios 跨域 POST 请求 CORS 错误

问题描述

使用 Axios 发出 POST 请求时，我在 React / Typescript 项目中遇到了 CORS 错误。该应用程序有一个 Node.js / Express 后端。我意识到 CORS 错误有多常见，并且我查看了所有关于该问题的评分最高的帖子，但我似乎无法解决该错误。我正在尝试向第三方 API 发出登录 POST 请求（它们需要登录验证才能执行请求）。现在我在前端的 POST 请求如下所示：

const headers = {
  crossDomain: "true",
  Accept: "*/*",
  Authorization: `Bearer ${localStorage.token}`,
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
  "Access-Control-Allow-Headers": "Origin, Content-Type, Authorization, X-Auth-Token",
  "Content-Type": "application/x-www-form-urlencoded",
};

export const useKirbyLogin = async () => {
  try {
    const response = await axios.post(
      "apiURL",
      {
        jsonData,
      },
      {
        headers: headers,
      }
    );
    console.log(response);
  } catch (err) {
    console.error(err);
  }
};

并非所有这些 Headers 选项都是一次配置的 - 我尝试了各种配置，带有和不带有“Access-Control-Allow-Methods”或“Access-Control-Allow-Headers”的标题（我不认为你是应该将这些用于请求，但我还是尝试了以防万一），与“Content-Type”相同。我也尝试过将“Content-Type”设置为“application/json”。我尝试在配置文件中设置 Axios。这些都没有奏效。我尝试在后端实现相同的功能，但收到 403 错误。在后端启用所有 CORS 请求：

app.use(cors());

这些是我得到的错误：

cors错误 网络错误

我不确定发生了什么，所有 CORS 解决方案都说同样的话，但这些解决方案对我不起作用。

编辑：我尝试在服务器上的 CORS 中设置配置，但仍然返回 403 错误：

const corsOptions = {
    origin: '*',
    credentials: true,
    optionSuccessStatus: 200,
};

app.use(cors(corsOptions));

错误 403

编辑：我已经联系了 API 所有者，因为我仍然无法解决 403 错误/CORS 问题。这个问题可能不是我的问题，还是我的代码中的任何内容看起来不正确？

标签： node.jsreactjstypescriptaxioshttp-status-code-403

解决方案

API 提供商回复我并确认这确实是他们的问题。特别是，本地主机似乎有一些问题。我相信他们的 API 目前根本不接受来自本地主机的请求。（临时）解决方案是使用cors-anywhere绕过错误。

export const useKirbyLogin = async () => {
  try {
    const response = await axios.post(
      `https://cors-anywhere.herokuapp.com/${apiURL}`,
      {
        jsonData,
      },
      {
        headers: headers,
      }
    );
    console.log(response);
  } catch (err) {
    console.error(err);
  }
};

推荐阅读