0

I am trying to subscribe users to my mailchimp list using this snippet:

function subscribeUser(name, email) {
  var xhr = new XMLHttpRequest();
  var endpoint = 'https://<dc>.api.mailchimp.com/3.0/lists/<list>/members/';
  var data = {};
  data.email_address = email;
  data.status = "subscribed";
  data.merge_fields = {};
  data.merge_fields.NAME = name;
  xhr.open("POST", endpoint, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.setRequestHeader("Authorization", "apikey <key>");
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
      alert(xhr.responseText);
    }
  }
  xhr.send(data);
}

It generates this error in chrome:

I am unable to write ajax based services to update lists. Because you guys did not add the Access Control header. I cannot send a simple xhr to your endpoint using a modern browser.

XMLHttpRequest cannot load https://<dc>.api.mailchimp.com/3.0/lists/<list>/members/. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. The response had HTTP status code 501.

Mine is a static website and I would like to keep it that way. No backend is needed, hosted on github. So I need a JS solution to this.

whizzzkid
  • 1,174
  • 12
  • 30

1 Answers1

0

They currently do not allow client-side access to their API. Their response to a similar question in comments:

We do not support accessing the API via client-side Javascript to avoid the security issue of passing your API Key along to your users.

Alexandra
  • 4,723
  • 3
  • 26
  • 32