CORS policy limits Reactjs API calls

Question

I'm trying to use the Mailchimp API in my ReactJS application, but every time I call the Mailchimp API I get the following error:

The XMLHttpRequest accessing 'https://us9.api.mailchimp.com/3.0/ping' was received from the source of 'http://localhost:3000' Blocking due to CORS policy: The response to the preflight request failed an access control check: 'Access-Control-Allow-Origin' header is not present on the requested resource. 

The following is my api.js file, which calls the Mailchimp API:

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

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

It says to add 'Access-Control-Allow-Origin' to the request's headers, I'm not sure how to do that. Is there any way to solve this problem?

Answer 1

It says to add the Access-Control-Allow-Origin header to the response, not the request.

I don't know how to do this in reactjs, but this answer might help.

This answer suggests creating a middleware since you are using an external API and therefore do not have access to the server.