创建 React 应用程序：setupProxy 不断返回被 CORS 策略阻止的 401，不适用于远程 URL？

Question

这是我的设置代理代码：

const { createProxyMiddleware } = require("http-proxy-middleware");

function proxy(app) {
  app.use(
    "/3.0/lists",
    createProxyMiddleware({
      target: "https://us19.api.mailchimp.com",
      changeOrigin: true,
    })
  );
 ...
}

我的 post 请求取决于用户输入。例如：

https://us19.api.mailchimp.com/3.0/lists/123/members/432/tags

但我不断收到此错误：在

访问 XMLHttpRequest

'https://us19.api.mailchimp.com/3.0/lists/7667u7/members/23er23ewe233/tags' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

但我已经在 setupProxy 中安装了它？

Answer 1

当前端应用程序从不同来源（localhost vs us19.api.mailchim.com）向资源发出请求时，浏览器会发出飞行前请求以检查服务器是否允许从产地不同。如果是这样，它应该用 Access-Control-Allow-Origin header.

回复预检请求

API 可能非常宽松，允许任何来源：

Access-Control-Allow-Origin: *

或者服务器可以将一些来源列入白名单并根据来源发送特定的 header。例如：

Access-Control-Allow-Origin: localhost:3000

如果响应中没有这样的 header，则浏览器不会因您提到的错误而阻止请求。

在您的情况下，us19.api.mailchimp.com/3.0/lists 似乎不允许 CORS 调用。因此，您有 2 个解决方案。

如果您可以控制服务器，则可以通过将 header 放在响应中来实现一些 CORS 支持
或者您的前端可以调用您的后端（没有 CORS，因为来源相同 localhost:3000），然后后端将充当代理并调用 us19.api.mailchimp.com

根据您的代码片段，您实际上已经在选择第二个选项，其中您的后端是 us19.api.mailchimp.com 的代理。然而，为了让它工作，前端应该以 /3.0/lists 为目标（因此不会有 CORS 检查，因为你的前端和服务器都在 localhost:3000 上）然后你的后端会将请求转发到 us19.api.mailchimp。 com.

注意：由于我从未使用过 http-proxy-middleware，我假设您的设置中没有与 express 和 http-proxy-middleware 相关的问题。但这也可能是一个额外的检查点。

编辑

似乎对 us19.api.mailchimp.com 的前端调用是由 @mailchimp/mailchimp_marketing 完成的，因为这样的目标 /3.0/lists 不是一个选项。同样在进一步阅读之后，无法使用 mailchimp API.

配置 CORS

所以解决方案是在服务器端移动 @mailchimp/mailchimp_marketing 的使用，而不是在客户端使用它。

Answer 2

您的客户端不知道您在服务器上设置的代理中间件。它不能自动将原来的 URL 替换为代理的 URL。你必须自己做。

更改 client-side JS，使其向 /3.0/lists 发出请求。

创建 React 应用程序：setupProxy 不断返回被 CORS 策略阻止的 401，不适用于远程 URL？

create react app: setupProxy keeps returning 401 blocked by CORS policy, not working for remote urls?

javascript

reactjs

create-react-app

http-proxy-middleware