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

这是我的设置代理代码：

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

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

我的post请求取决于用户输入。e、 g:

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中已经有了它？

当前端应用程序从不同的来源（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调用。因此，您有两种解决方案

如果您可以控制服务器，那么可以通过在响应中添加头来实现一些CORS支持

或者您的前端可以调用后端（没有CORS，因为源是同一个localhost:3000），然后后端将充当代理并调用us19.api.mailchimp.com

根据您的代码片段，您实际上已经在使用第二个选项，您的后端是us19.api.mailchimp.com的代理。但是，要使其正常工作，前端应以/3.0/lists为目标（因此不会进行CORS检查，因为您的前端和服务器都位于localhost:3000上），然后您的后端将请求转发到us19.api.mailchimp.com

注意：由于我从未使用过http代理中间件，所以我假设您的设置中没有与express和http代理中间件相关的问题。但这也可能是需要检查的另一点

编辑

似乎对us19.api.mailchimp.com的前端调用是由@mailchimp/mailchimp_营销人员完成的，因为这样的目标/3.0/lists不是一个选项。 另外，在进一步阅读之后，没有办法用mailchimp API配置CORS

---

因此，解决方案是将@mailchimp/mailchimp\u营销的使用转移到服务器端，而不是客户端。

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

---

更改客户端JS，使其将请求发送到

/3.0/lists

这可能很愚蠢，但来自UI的post请求的目标是localhost:3000/3.0/lists并且不正确？我正在向us19.api.mailchimp.com/3.0/lists发出post请求，而不是在“/3.0/lists”@user3252327上。我正在为此使用一个包，例如，怎么做？：wait mailchimp.lists.updateListmembertag我不知道那个包。试试它的文档，看看它是否有关于重新映射URL的信息。可能使用it服务器端，并围绕它构建一个包装器，而不是使用http-proxy-MIDDERWARE。这是一个包：@mailchimp/mailchimp\u marketing我认为可以在客户端“mailchimp营销API的官方Node.js客户端库”中使用它是的，但我不明白为什么会出现COR错误，我相信我不必在客户端配置cors就能使用它？