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，因此無法存取伺服器。