这是我的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中已经有了它?
您的客户端不知道您在服务器上设置的代理中间件。它不能自动将原始URL替换为代理的URL。你必须自己做。
更改客户端JS,使其向/3.0/lists
发出请求。
当前端应用程序从不同来源(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_marketing完成的,因为这样的targeting/3.0/lists不是一种选择。此外,在进一步阅读后,无法使用mailchimp API配置CORS。
因此,解决方案是将@mailchimp/mailchimp_marketing的使用转移到服务器端,而不是在客户端。