CORS policy blocking access to Mailchimp API

Viewed 664

I am developing a newsletter pop-up using nuxtJS and vuetify. The process is simple: you enter you email adresse, mailchimp to the rest.

I am having an issue with Mailchimp API. When I test the API using postman with the same setup, it works fine without any problems. (I can verify by checking the mailchimp account).

But when I try to subscribe through the pop-up, I recieve this error: Error recieved

This my function code:

let data = {
    "email_address": payload,
    "status": "subscribed",
    "merge_fields": {
      "FIRSTNAME": "",
      "LASTNAME": ""
    }
  }
  const base64ApiKey = Buffer.from(`c18ab83bd3e9032e080d49f526285039-us6`).toString("base64");
  // const base64ApiKey = "c18ab83bd3e9032e080d49f526285039-us6";
  this.$axios.post("https://us6.api.mailchimp.com/3.0/lists/c3a3dea1fc/members/", data, {
    method: 'POST',
    mode: 'no-cors',
    headers: {
      "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token, Authorization, Accept,charset,boundary,Content-Length",
      "Content-Type": "application/json",
      Authorization: `auth ${base64ApiKey}`,
      "Access-Control-Allow-Origin": "*",
    },
    withCredentials: true,
    credentials: 'include',
    // proxyHeaders: false,
    // credentials: false
  }).then(res => {
    console.log(res.data);
  }).catch(err => {
    console.log(err);
  });
}

It's obviously a CORS problem, I tried on another machine and still have the same error.

1 Answers

A CORS issue is not to be setup on the front-end but rather on the backend/dashboard panel of the service.

So, there is probably a way to whitelist your localhost and production URL on the Mailchip dashboard.

Try to Google this out to find a guide.

Related