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

如何解决创建反应应用程序：setupProxy不断返回返回401，但被CORS策略阻止，不能用于远程URL？

这是我的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

但我一直收到此错误：在以下位置访问XMLHttpRequest：

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

但是我已经在setupProxy中了吗？

解决方法

当前端应用程序从其他来源（本地主机与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的支持
或者您的前端可以调用您的后端（由于源是相同的localhost：3000，所以没有CORS，那么后端将充当代理并调用us19.api.mailchimp.com

根据您的代码段，实际上您已经在选择第二种方法，其中您的后端是us19.api.mailchimp.com的代理。但是，要使此工作正常进行，前端应该以/3.0/lists为目标（因为您的前端和服务器都在localhost：3000上，所以不会进行CORS检查），然后您的后端会将请求转发给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。

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

更改客户端JS，使其向/3.0/lists发送请求。