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

Posted 2023-03-03

【中文标题】创建反应应用程序：setupProxy 不断返回被 CORS 策略阻止的 401，不适用于远程 URL？

【英文标题】：create react app: setupProxy keeps returning 401 blocked by CORS policy, not working for remote urls?

【发布时间】：2021-01-23 20:58:22

【问题描述】：

这是我的 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 中有它了？

【问题讨论】：

这可能很愚蠢，但来自 UI 的发布请求的目标是 localhost:3000/3.0/lists 而不是 us19.api.mailchimp.com/3.0/lists 对吗？

我正在向 us19.api.mailchimp.com/3.0/lists 发出帖子请求，而不是在 '/3.0/lists' @user3252327

【参考方案1】：

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

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

【讨论】：

我正在为此使用一个包，例如，如何？.: await mailchimp.lists.updateListMemberTags

我不知道那个包。试试它的文档，看看它是否有关于重新映射 URL 的信息。也许在服务器端使用它并围绕它构建一个包装器，而不是使用 http-proxy-middleware。

这是包：@mailchimp/mailchimp_marketing 我认为可以在客户端使用它

"Mailchimp 营销 API 的官方 Node.js 客户端库"

是的，但我不明白为什么我有 cors 错误，我相信我不必在客户端配置 cors 来使用它？

【参考方案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

根据您的 sn-p，您实际上已经在选择第二种选择，您的后端是 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 的使用转移到服务器端，而不是在客户端。