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

Posted 2023-03-24

【中文标题】对 Mailchimp API 3.0 的 Ajax 调用返回 HTTP 501

【英文标题】：Ajax call to Mailchimp API 3.0 returns HTTP 501

【发布时间】：2017-01-04 13:06:02

【问题描述】：

我正在尝试简单地将带有名称的邮件地址订阅到 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/。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://preprod.travelgap.io' 因此不允许访问。

响应的 HTTP 状态代码为 501。

我还尝试将 jsonp 作为数据类型，然后我收到 401 错误。 Authkey 未通过。

【问题讨论】：

需要在您的服务器上使用代理。你不希望你的 api 密钥暴露，mailchimp 也不希望

首先它的工作会很好，然后我可以实现一个代理？

需要让它在您的服务器上运行。 API 没有为使用 ajax 启用 CORS

好的，谢谢。然后我尝试使用 curl :)

有人请写一个答案。停止使用 cmets 作为答案！

【参考方案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 密钥应被视为仅在服务器端可用的秘密。后一种架构确保了这种情况。