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?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
It says to add the
Access-Control-Allow-Originheader to the response, not the request.I don't know how to do this in reactjs, butthis answermight help.
This answersuggests creating a middleware since you are using an external API and therefore do not have access to the server.