CORS Policy Error When Integrating Mailchimp with Gatsby and Strap

Question

I am encountering a CORS policy error when trying to integrate Mailchimp with my Gatsby project. The error message states: "has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource."

Expected Behavior:

The subscription request should be successfully sent to Mailchimp, and the user should be subscribed to the newsletter.

here is my code:

const SignUpBanner: React.FC<SignUpBannerProps> = ({}: SignUpBannerProps) => {
  const [email, setEmail] = useState('');
  const [subscriptionStatus, setSubscriptionStatus] = useState('');

  const handleSubscribe = async () => {
    try {
      const response = await axios.post(
        'https://xxx.us21.list-manage.com/subscribe/post?u=xxxx&id=xxxx&f_id=xxxx',
        {
          EMAIL: email,
          SIGNUP: 'HOME', // Specify your signup location here
        },
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
        }
      );

      if (response.status === 200) {
        setSubscriptionStatus('success');
      } else {
        setSubscriptionStatus('error');
      }
    } catch (error) {
      setSubscriptionStatus('error');
      console.error('Error subscribing:', error);
    }
  };

  return (
    <div className={`${paddingForBanner}`}>
      <div
        className={`${paddingForSignUpContent} d-xl-flex d-lg-flex justify-content-xl-between justify-content-lg-between`}
      >
        <div className={`${signUpHeading}`}>
          Stay connected through our newsletter!
        </div>
        <div className={`${signUptitle}`}>
          Subscribe to our newsletter and get the latest insights on history, art &
          art & culture in your inbox.
          <div className={`${emailInput} d-xl-flex d-lg-flex`}>
            <div className={`${inputDiv}`}>
              <input
                type="email"
                placeholder="Enter Email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                className={`${customInputField} ${emailfield} form-control`}
              />
            </div>
            <div
              className={`${signUpButton} d-flex d-lg-flex flex-row flex-lg-row justify-content-end align-items-center justify-content-lg-center `}
              onClick={handleSubscribe}
            >
              <div className={`${signUpText}`}>
                {subscriptionStatus === 'success' ? 'Subscribed!' : 'SIGNUP'}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SignUpBanner;

How can I resolve this CORS issue ?

Answer 1

why is this happening?

Mailchimp does not allow you to integrate with any resources or information of the website's origin.

CORS stands for cross-origin-resource-sharing, it's a mechanism that all browsers use for security reasons. in order to set this policy to your website you must add a HTTP header named 'Access-Control-Allow-Origin' like below:

Access-Control-Allow-Origin: https://foo.example

in your case https://xxx.us21.list-manage.com CORS header is set to: Access-Control-Allow-Origin: https://list-manage.com which means only the HTTP requests with the origin set to https://list-manage.com are allowed to send request to https://xxx.us21.list-manage.com

how can you solve this?

There is no way that you can change the Origin HTTP header, there's only two option for this:

1. requesting from the origin https://list-manage.com

you have to send a request from the same server that includes the origin https://list-manage.com. subdomains might be included too, it depends on what the Access-Control-Allow-Origin is set to. which means you can send a request from https://subdomain.list-manage.com

2. change the Access-Control-Allow-Origin header to *

the developers of Mailchimp should change the Access-Control-Allow-Origin header to * so anyone can access it and use the resource and the content of the site.

summery

the developers of Mailchimp made this policy so no one can integrate with their website. only they can change this mechanism