即使在 Try it out 编辑器中，对 Swagger API 的提取请求也会不断返回 CORS 错误

Question

我正在开发一个用 React (Vite) 制作的应用程序，目前我正在尝试访问第三方 Swagger API，该 API 为我提供了使用 React-query 发出获取请求的功能。我的问题是，无论我如何使用代理或请求标头，我都会收到 401 Unauthorized 或 CORS 错误。

这就是我当前的请求：

const useFetchItems = ({ query, params, token }) => {
  const fetchUrl = `/api${query}${params}`;

  return useQuery(query, async () => {
    console.log('URL:', fetchUrl, 'TOKEN:', token);
    const response = await fetch(fetchUrl, {

      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json',
      },
      method: "GET",
    });
    console.log(response)
    if (!response.ok) {
      throw new Error("An error has occured.");
    }
    return response.json();
  });
};

export default useFetchItems;

我正在传递从 Firebase 身份验证收到的授权令牌，尽管如此，每当我使用代理时，我都会收到 401 未经授权的错误。问题不在于我的令牌变量的传递方式，因为当我对令牌进行硬编码时，我遇到了相同的错误。我也尝试过设置

mode: no-cors

之类的小事情，但不起作用。

通过注销我收到的响应，我可以知道我的代理工作正常。这就是我在 vite.config 文件中设置它的方式：

const url= 'http://redacted.example.api/v1/'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: url,
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  },
});

每当我尝试在没有代理的情况下使用 api url 时，都会收到 CORS 错误。 当我使用 Try it out 编辑器尝试任何 API 请求时，也会发生 CORS 错误。事实上，我的请求在 Postman 中运行良好，这让我认为问题出在 CORS 上，但如果我对 API 没有影响力，我该如何解决它。我应该联系 API 所有者（这是我正在申请的公司拥有的 API）还是可以从我这边绕过的人？

Answer 1

因为使用 Postman 调用 API 没问题，但在 Swagger UI 中单击“Try it Out”时就不行了。从代码中获取时出现的错误很可能是因为尚未设置 CORS 标头。

要使“立即尝试”按钮正常工作，还需要在 API 端点上启用 CORS。

参考：https://swagger.io/docs/open-source-tools/swagger-ui/usage/cors/

响应标头应具有

Access-Control-Allow-Origin

，其值为允许访问 API 的源。

要解决此问题，您可以选择以下选项：

联系 API 所有者

如果它是一个公共 API，甚至有一个 Swagger UI 允许您尝试该 API，那么他们很可能希望它被公开使用。您可以联系 API 所有者来添加适当的 CORS 标头。

使用您的后端来转发请求

如果 API 没有 CORS 标头，仍然可以从后端获取它，因为 CORS 仅在浏览器中强制执行。您可以做的是设置一个端点以从该特定 API 获取数据。在您的前端中，您可以调用此端点，而不是直接调用 API。

Express 中的示例，但您需要将其适应您的后端框架

app.get('/relay', (req, res) => {
  fetch('http://redacted.example.api/v1/')
    .then(response => response.json())
    .then(data => res.json(data));
});

使用 CORS 代理

如果您没有后端，或仅运行前端网络，则可以使用 CORS 代理。它执行相同的操作，即通过服务器中继请求，然后返回带有适当 CORS 标头的响应。您可以使用自托管 (cors-anywhere) 或托管 CORS 代理 (Corsfix)。以下是您通常如何使用 CORS 代理。

fetch("https://proxy.corsfix.com/?http://redacted.example.api/v1/")

这样您将在前端获得响应，而不会出现 CORS 错误。

（我隶属于 Corsfix）