jquery - Mailchimp how to call mailchimp 3.0 API in javascript

Question

I am trying to subscribe an email to a list on mailchimp, I followed the documentation first, made a request using "Postman" added what was needed and everything works just fine, so I tried to do it on my website and it didn't work

I tried to made a simple request with the same values I set on postman, but everytime I try to send the request the response says

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

I tried to find a way to overcome this but it has been impossible

I searched on stackoverflow everybody says to use jsonp or add something to the ajax call or use a mailchimp ajax plugin nothing has worked

I tried diferent stackoverflow posts like this one Mailchimp subscribe using jQuery AJAX? but almost all of them say the same

I tried cache: false dataType:jsonp crossDomain: true xhrFields: {withCredentials: true}

Here it is my code, I am using Jquery

$.ajax({
          type: "POST",
          url: "https://usxx.api.mailchimp.com/3.0/lists/xxxxxxxx/members",

          data: { "email_address":[email protected],  "status":"subscribed"},
          headers: {
            "Authorization": "Basic xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx==",
            "Content-Type": "application/json"
          },
          success: function(data){
             alert('Thanks for subscribing');
          },
          error: function(data){
            alert('there was an error, try again later');
          }
});

I also Thought on creating my own api and then make the call to mailchimp api but I might ran into the same problem

Do you have any suggestions?

Thanks in advance

Answer 1

As charliefl noted, this is a CORS issue. MailChimp doesn't support CORS, mostly because it would require you passing your API credentials to the user of the webpage, allowing them to takeover your entire account.

Your two options for MailChimp are to proxy your requests through a server or, for signing people up to your list, you can build a custom signup form that uses a much more restricted API. The caveat of this second method is that it forces all of your subscribes through MailChimp's double opt-in process.