Ajax вызов Mailchimp API 3.0 возвращает HTTP 501

Question

Я пытаюсь просто подписаться на адрес электронной почты с именем в список MailChimp. Я думал, что это должно быть очень легко, но я не могу опубликовать там почтовый адрес.

Вы можете найти полный код здесь (ключ = authkey):

$(document).ready(function(){ 
    $('#blogsignup').submit(function(event){ 
     event.preventDefault(); 

     $.ajax({ 
      url : "https://us12.api.mailchimp.com/3.0/lists/247e2f0702/members/", 
      dataType : "json", 
      headers: { "Content-Type":"application/json", 'Access-Control-Allow-Origin': '*', "Accept": "application/json", "Authorization": "key-us12" }, 
      type : 'POST', 
      contentType: "application/json", 
      data : { 
       apikey: "key", 
       email_address: $('#TBemail').val(), 
       status: 'subscribed',    
       merge_fields: { 
        FNAME: "subscriberFirstName", 
        LNAME: "subscriberLastName" 
       } 
      }, 
      // Try to send also before 
      beforeSend: function(xhr) { xhr.setRequestHeader("Authorization", 
       "Basic " + btoa("api:" + "key-us12")); 
      },     
      success : function (data) { 
       $('#signup').html("Thanks for signing up. We will contact you as fast as possible."); 
      }, 
      error : function (data, errorThrown) { 
       alert(errorThrown); 
       console.log(data); 
      } 
     }); 
    }); 
}); 

Функция вызывается при нажатии на кнопку отправки. Я всегда получаю «ошибка» предупреждения и говорит

XMLHttpRequest не может загрузить https://us12.api.mailchimp.com/3.0/lists/247e2f0702/members/. Ответ на запрос перед полетом не проходит проверку контроля доступа. Нет заголовка «Access-Control-Allow-Origin» на запрошенном ресурсе. Происхождение 'http://preprod.travelgap.io' поэтому не допускается.

Ответ был HTTP код статуса 501.

Я также пытался jsonp, как Datatype тогда я получаю 401 ошибку. Authkey не прошел.

Answer 1

Ответ на запрос предполетной проверки не проходит проверку доступа: на запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin».

Это означает, что клиенту (совершению вызова AJAX) не разрешено напрямую обращаться к API. Ваша текущая архитектура:

Client (any origin) ---> MailChimp API 

Что вы должны сделать, как это было предложена уже, это использовать ваш сервер для прокси-сервера по запросу на удаленный API, так что вы не нарушаете их CORS правила. Вы должны добавить конечную точку API на своем сервере, которая при доступе к клиенту делает запрос на серверную сеть для API MailChimp.

Client (any origin) ---> Server (known, whitelisted origin) ---> MailChimp API 

Кроме того, ваш ключ API никогда не должен существовать в клиентском коде. Ваш ключ API должен считаться секретным, доступным только на стороне сервера. Последняя архитектура гарантирует, что это так.