Mailchimp API 3.0へのAjax呼び出しで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/をロードすることはできませんと言っています。プリフライト要求への応答がアクセス制御チェックを通過しない：要求されたリソースに「アクセス制御許可」がない。 Origin 'http://preprod.travelgap.io'はアクセスできません。

応答は、私はまた、データ型としてjsonpをしようとしていたHTTPステータスコード501の

を持っていたし、私は401エラーを取得します。 Authkeyが渡されません。

Answer 1

プリフライト要求に応答しても、アクセス制御チェックに合格しません：要求されたリソースに「アクセス制御許可の原点」ヘッダーがありません。

これは、クライアント（AJAX呼び出しを行う）が直接APIにヒットすることができないことを意味します。あなたの現在のアーキテクチャ：あなたは何をすべき

Client (any origin) ---> MailChimp API 

、すでに示唆したように、あなたが彼らのCORSのルールに違反しないように、リモートAPIへのリクエストを介してプロキシにサーバーを使用しています。サーバー側にAPIエンドポイントを追加して、クライアントがアクセスするとサーバー側のネットワーク要求をMailChimp APIに送信する必要があります。

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

また、APIキーはクライアントコードに存在しないようにしてください。あなたのAPIキーは、サーバー側でのみ利用可能な秘密と見なされるべきです。後者のアーキテクチャは、これが当てはまることを保証します。