创建 React 应用程序：setupProxy 不断返回被 CORS 策略阻止的 401

Question

这是我的 setupProxy 代码：

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

function proxy(app) {

  app.use(

    "/3.0/lists",

    createProxyMiddleware({

      target: "https://us19.api.mailchimp.com",

      changeOrigin: true,

    })

  );

 ...

}

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

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

但我不断收到此错误：Access to XMLHttpRequest at

来自“http://localhost:3000”的“https://us19.api.mailchimp.com/3.0/lists/7667u7/members/23er23ewe233/tags”已被 CORS 策略阻止：对预检请求的响应不通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

但我已经在 setupProxy 中有了它？

Answer 1

您的客户端不知道您在服务器上设置的代理中间件。它不能自动将原始 URL 替换为代理的 URL。你必须自己做。更改客户端 JS，使其向/3.0/lists.

Answer 2

当前端应用程序从不同来源（localhost vs us19.api.mailchim.com）向资源发出请求时，浏览器会发出飞行前请求以检查服务器是否允许从不同来源调用其入口点。如果是这种情况，它应该使用 Access-Control-Allow-Origin 标头回复预检请求。API 可以非常宽松并允许任何来源：Access-Control-Allow-Origin: *或者服务器可以将一些来源列入白名单并根据来源发送特定的标头。例如：Access-Control-Allow-Origin: localhost:3000如果响应中没有这样的标头，则浏览器不会因您提到的错误而阻止请求。在您的情况下，us19.api.mailchimp.com/3.0/lists 似乎不允许 CORS 调用。因此，您有 2 个解决方案。如果您可以控制服务器，则可以通过将标头放在响应中来实现一些 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 的使用，而不是在客户端使用它。