CORS策略限制了Reactjs的API调用

Question

我正在尝试在我的ReactJS应用程序中使用Mailchimp API，但每次调用Mailchimp API时都会收到以下错误：

访问'https://us9.api.mailchimp.com/3.0/ping'的XMLHttpRequest被来自'http://localhost:3000'的源阻止，原因是CORS策略：预检请求的响应未通过访问控制检查：请求的资源上不存在'Access-Control-Allow-Origin'标头。

以下是我的api.js文件，其中调用了Mailchimp API：

mailchimp.setConfig({
    apiKey: "my_api_key",
    server: "us9"
});

const addEmailToMailchimp = async (email) => {
    const response = await mailchimp.ping.get();
    console.log(response);
};

它说要在请求的标头中添加'Access-Control-Allow-Origin'，我不确定如何做。有什么办法可以解决这个问题吗？

Answer 1

它说要在响应中添加Access-Control-Allow-Origin头部，而不是请求。

我不知道如何在reactjs中做到这一点，但是这个答案可能会有所帮助。

这个答案建议创建一个中间件，因为您正在使用外部API，因此无法访问服务器。