Issue
I am trying to update MailChimp members from Google Tag Manager, using MailChimp API v3.0, but I am having issues. This is my code, which I'm running from a real domain (not localhost), secured with a valid SSL certificate (if it matters).
const xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = () => {
try {
if (xmlHttp.readyState !== 4) return;
if (xmlHttp.status !== 200)
throw new Error(
xmlHttp.statusText || 'HTTP STATUS ' + xmlHttp.status
);
console.log(xmlHttp.responseText);
} catch (err) {
console.error(err);
}
};
xmlHttp.open('POST', 'https://us12.api.mailchimp.com/3.0/lists/d5bed898ae/members/0740287eb1c63371a10d32ebf58391f9');
xmlHttp.setRequestHeader('Authorization', 'Basic ' + btoa('anystring' + ':' + 'my-api-key-here'));
xmlHttp.setRequestHeader('content-type', 'application/json');
xmlHttp.send('{"email_address":"user@example.com", "status":"subscribed", "member_rating":"4"}');
I get a CORS error:
Access to XMLHttpRequest at 'https://us12.api.mailchimp.com/3.0/lists/d5bed898ae/members/0740287eb1c63371a10d32ebf58391f9' from origin 'https://subdomain.example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
What am I doing wrong?
UPDATE:
Note, I am not trying to add a new member, I am trying to update an existing one. Also, the API key is not visible, I am picking it up as a GTM variable. Also, the code is running on the domain, as GTM is loaded on the page.
Where am I supposed to run this code? On Mailchimp servers? What am I missing?
Solution
First of all, EEK! You should never put a private API key in client-facing code, in this case in GTM. If a website visitor noticed, they could easily use your API key themselves to do pretty much whatever they wanted with your Mailchimp account, including deleting everything in it. From Mailchimp's docs:
API keys grant full access to your Mailchimp account and should be protected the same way you would protect your password.
If you have already put this code live, even just for a few minutes, you will want to immediately disable/revoke that API key and create a new one.
Second, the CORS error is because MailChimp specifically does not support API requests that originate in browsers from outside their own domain - e.g. Cross-Origin requests that require a proper CORS response header. The reason for this is the same as my warning above - you should not be making API calls from client-side code due to the inherent security risks. On the same MailChimp doc page, they repeat this warning:
Because of the potential security risks associated with exposing account API keys, Mailchimp does not support client-side implementation of our API using CORS requests or including API keys in mobile apps.
See this StackOverflow question for a similar discussion.
To address this, you need to have the actual API call come from actual server-side code. Most people would probably proxy the request through their own site - so if your site is example.com, you might have GTM make an AJAX call to example.com/mailchimp-proxy.php?action=update&list=d5bed898ae&user=0740287eb1c63371a10d32ebf58391f9&info=...
and then that PHP script would in turn call the actual API endpoint of https://us12.api.mailchimp.com/3.0/...
with the data. Because the code is running server-side, if you put your key in it properly, no one should be able to read it.
Another alternative is to use something like Zapier, or "serverless" functions, to proxy the request so you don't need to run your own server.
Answered By - Joshua T Answer Checked By - Mildred Charles (PHPFixing Admin)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.