create-react-app:setupProxy一直返回被CORS策略阻止的401，不适用于远程URL

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 

但我一直收到这样的错误：在上访问XMLHttpRequest

'https://us19.api.mailchimp.com/3.0/lists/7667u7/members/23er23ewe233/tags'来自原点'http://localhost:3000'已被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调用。因此，您有两个解决方案。

1. 如果您可以控制服务器，您可以通过在响应中放入标头来实现一些CORS支持
2. 或者你的前端可以调用你的后端(没有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_marketing完成的，因为这样的targeting/3.0/lists不是一种选择。此外，在进一步阅读后，无法使用mailchimp API配置CORS。

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