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」ヘッダーが存在しません。 

以下は、Mailchimp API を呼び出す私の api.js ファイルです。

mailchimp.setConfig({
    apiKey: "my_api_key",
    サーバー: "us9"
});

const addEmailToMailchimp = async (電子メール) => {
    const 応答 = 待機 mailchimp.ping.get();
    console.log(応答);
};

リクエストのヘッダーに「Access-Control-Allow-Origin」を追加するように書かれていますが、その方法がわかりません。この問題を解決する方法はありますか?

Answer 1

Access-Control-Allow-Origin ヘッダーをリクエストではなくレスポンスに追加するように指示されています。

reactjs でこれを行う方法がわかりませんが、この回答が役立つかもしれません。

この回答では、外部 API を使用しているためサーバーにアクセスできないため、ミドルウェアを作成することをお勧めします。