对Mailchimp API 3.0的Ajax调用返回HTTP 501

时间:2016-08-28 10:29:32

标签: javascript jquery mailchimp-api-v3.0

我正在尝试简单地将名称的邮件地址订阅到MailChimp列表。 我认为这应该很容易,但我无法在那里发布邮件地址。

您可以在此处找到完整代码(key = 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/。对预检请求的响应没有通过访问控制检查:否'访问控制 - 允许 - 来源'标头出现在请求的资源上。起源' http://preprod.travelgap.io'因此不允许访问。

响应的HTTP状态代码为501。

我也尝试jsonp作为数据类型然后我得到401错误。 Authkey没有通过。

1 个答案:

答案 0 :(得分:1)

  

对预检请求的响应未通过访问控制检查:请求的资源上没有“Access-Control-Allow-Origin”标头。

这意味着不允许客户端(进行AJAX调用)直接命中API。您当前的架构:

Client (any origin) ---> MailChimp API

如您所建议的那样,您应该使用您的服务器代理对远程API的请求,以便您不违反其CORS规则。您应该在服务器上添加一个API端点,当客户端访问该端点时,会向MailChimp API发出服务器端网络请求。

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

此外,您的API密钥不应存在于客户端代码中。您的API密钥应被视为仅在服务器端可用的密钥。后一种架构确保了这种情况。