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 = 비동기(이메일) =>
    const 응답 = mailchimp.ping.get()을 기다립니다;
    console.log(응답);
};

요청 헤더에 'Access-Control-Allow-Origin'을 추가하라는 메시지가 있는데 어떻게 해야 할지 모르겠습니다. 이 문제를 해결할 수 있는 방법이 있나요?

Answer 1

요청이 아닌 응답에 Access-Control-Allow-Origin 헤더를 추가하라는 내용입니다.

reactjs에서 이 작업을 수행하는 방법을 모르겠지만 이 답변이 도움이 될 수 있습니다.

이 답변에서는 외부 API를 사용하므로 서버에 액세스할 수 없으므로 미들웨어를 만드는 것이 좋습니다.