Как я могу отправить запрос API MailChimp через JavaScript в Диспетчере тегов Google?
Я пытаюсь обновить участников MailChimp из Диспетчера тегов Google, используя MailChimp API v3.0, но у меня возникают проблемы. Это мой код, который я запускаю из реального домена (не с локального хоста), защищенного действительным сертификатом SSL (если это имеет значение).
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.info(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":"[email protected]", "status":"subscribed", "member_rating":"4"}');
Я получаю ошибку CORS:
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.
Что я делаю неправильно?
Обновлено:
Обратите внимание, я не пытаюсь добавить нового участника, я пытаюсь обновить существующего. Также ключ API не виден, я подбираю его как переменную GTM. Также код работает на домене, так как GTM загружается на страницу.
Где я должен запустить этот код? На серверах Mailchimp? Что мне не хватает?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Прежде всего, ЕЕК! Вы должны никогда поместить закрытый ключ API в клиентский код, в данном случае в GTM. Если посетитель веб-сайта заметил это, он мог легко использовать ваш API-ключ, чтобы делать с вашей учетной записью Mailchimp практически все, что он хотел, включая удаление всего в ней. Из документации Mailchimp:
API keys grant full access to your Mailchimp account and should be protected the same way you would protect your password.
Если вы уже запустили этот код, даже всего на несколько минут, вы захотите немедленно отключить/отозвать этот ключ API и создать новый.
Во-вторых, ошибка CORS связана с тем, что MailChimp специально не поддерживает запросы API, которые исходят от браузеров из-за пределов их собственного домена, например. Запросы между источниками, требующие правильного заголовка ответа CORS. Причина этого та же, что и в моем предупреждении выше — вы не должны выполнять вызовы API из кода на стороне клиента из-за присущих угроз безопасности. На той же странице документа MailChimp они повторяют это предупреждение:
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.
См. этот вопрос StackOverflow для аналогичного обсуждения.
Чтобы решить эту проблему, вам нужно, чтобы фактический вызов API исходил из фактического кода на стороне сервера. Большинство людей, вероятно, проксируют запрос через свой собственный сайт, поэтому, если ваш сайт — example.com, вы можете заставить GTM сделать вызов AJAX к example.com/mailchimp-proxy.php?action=update&list=d5bed898ae&user=0740287eb1c63371a10d32ebf58391f9&info=..., а затем этот PHP-скрипт, в свою очередь, вызовет реальную конечную точку API https://us12.api.mailchimp.com/3.0/... с данными. Поскольку код выполняется на стороне сервера, если вы правильно вставите в него свой ключ, никто не сможет его прочитать.
Другой альтернативой является использование чего-то вроде Запир или «бессерверных» функций для прокси-запроса, поэтому вам не нужно запускать собственный сервер.
Также код работает на домене, так как GTM загружается на страницу. Где я должен запустить этот код? На серверах Mailchimp? Что мне не хватает?
A) Переменные GTM доступны для чтения любому, кто загружает страницу, на которой находится тег, просто нужно открыть инспектор или другой инструмент разработчика. и B) Это подразумевалось моим ответом и другим ответом SO, на который я ссылался, но я мог бы быть немного более явным (я, вероятно, отредактирую свой ответ выше) - я думаю, что вам не хватает, это то, что вам нужно иметь запрос поступает с реального сервера. Большинство людей, вероятно, будут использовать свой собственный сервер и «проксировать» запрос через него — поэтому, если ваш сайт — example.com, GTM запрашивает example.com/updatemailchimp.php, который затем, в свою очередь, вызывает us12.api.mailchimp.com/3.0.
Понимаю. Я не могу использовать прокси, так как сервер C#. Тогда я передам это разработчику C#. Переменные GTM недоступны для чтения никому за пределами GTM. Вы можете объявить переменную GTM из атрибута данных, вызова API или элемента на странице. Переменные GTM объявляются только внутри GTM, снаружи они не существуют. Спасибо, я приму ваш ответ.
Спасибо, Джошуа, я не пытаюсь добавить нового участника, я пытаюсь обновить существующего. Также ключ API не виден, я подбираю его как переменную GTM.