如何有效调试对 MailChimp 3.0 服务器的 JQuery GET 请求？

Question

我正在尝试将用户的电子邮件添加到我的 Mailchimp 3.0 受众列表中。我正在使用 JQuery 发出 GET 请求，但我保留了以下错误：

{"type":"http://developer.mailchimp.com/documentation/mailchimp/guides/error-glossary/","title":"API Key Invalid","status":401,"detail":"Your request did not include an API key.","instance":"1e63d45d-2f46-481f-a674-3c307033cd29"}

这个错误发生在我点击我的按钮触发请求后。

这是我的 HTML 代码中 JQuery 脚本从中提取的部分：

<form **action="https://us4.api.mailchimp.com/3.0/lists/8a99d9c7eb/members/>"**
                                method="get" **id="mc-embedded-subscribe-form"** name="mc-embedded-subscribe-form" class="validate">
                                    <p class="signUp mt-5">
                                        We are currently Beta testing our service and will reveal more
                                        soon. Enter your email address below to receive updates.
                                    </p>
                                    <div class="form-label-group">
                                        <input type="email" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="form-control"
                                            placeholder="Email address" required autofocus>
                                    </div>

                                <input type="submit" value="Notify me" name="subscribe" id="mc-embedded-subscribe" class="btn btn-sm btn-success mt-1 shadow-lg">
                                <div id="subscribe-result"></div>
                                    <!-- <button class="btn btn-sm btn-success mt-1 shadow-lg" id="submitInfo"
                                        type="submit">Notify
                                        Me</button> -->
                                </form>

这是我的 JQuery 代码：

$(document).ready(function () {
 var $form = $('#mc-embedded-subscribe-form')
 if ($form.length > 0) {
   $('form input[type="submit"]').bind('click', function (event) {
     if (event) event.preventDefault()
     register($form)
   })
 }
})

function register($form) {
 $('#mc-embedded-subscribe').val('Sending...');
 $.ajax({
   type: $form.attr('method'),
   url: $form.attr('action'),
   data: $form.serialize(),
   status: "unsubscribed",
   headers: {
     'Authorization': 'Basic ' + new Buffer(`anything': 'apikey xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-usx`)
   },
   cache: false,
   dataType: 'json',
   contentType: 'application/json; charset=utf-8',
   error: function (err) {
     alert('Could not connect to the registration server. Please try again later.')
   },
   success: function (data) {
     $('#mc-embedded-subscribe').val('subscribe')
     if (data.result === 'success') {
       // Yeahhhh Success
       console.log(data.msg)
       $('#mce-EMAIL').css('borderColor', '#ffffff')
       $('#subscribe-result').css('color', 'rgb(53, 114, 210)')
       $('#subscribe-result').html('<p>Thank you for subscribing. We have sent you a confirmation email.</p>')
       $('#mce-EMAIL').val('')
     } else {
       // Something went wrong, do something to notify the user.
       console.log(data.msg)
       $('#mce-EMAIL').css('borderColor', '#ff8282')
       $('#subscribe-result').css('color', '#ff8282')
       $('#subscribe-result').html('<p>' + data.msg.substring(4) + '</p>')
     }
   }
 })
};

我曾尝试使用 Fetch 和 AJAX 提出此请求，但没有雪茄。这种方法帮助我取得了进步，但运行解决了这个小问题。我查看了以下问题和答案以获取更多支持：

Javascript + MailChimp API subscribe

AJAX Mailchimp signup form integration Access MailChimp API 3.0 (GET)

最后，这是 MailChimp API 文档。

Add a Contact to a List/Audience (1 paragraph)

Add a new list member (search on "Add a new list member")

HTTP Basic Authentication(fourth paragraph)

感谢您的帮助！！

Answer 1

在前端公开您的 API 密钥不是一个好主意。您可以按照这种方法将用户添加到特定列表/受众

<!-- Please copy your form from Mailchimp Signup form ( condensed in your case ) or copy the form and input values from the form  -->
    <form action="Your url from signup form" method="get" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
        <label for="mce-EMAIL">Subscribe</label>
        <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="from signup form" tabindex="-1" value=""></div>
        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
        </div>
    </form>

下面是ajax请求

$(document).ready(function () {
    $("#mc-embedded-subscribe-form").submit(function (e) {
        let form = $("#mc-embedded-subscribe-form")
        e.preventDefault();
        var settings = {
            url: form.attr('action'),
            type: form.attr('method'),
            data: form.serialize(),
            dataType: 'jsonp',
            contentType: "application/json; charset=utf-8",
        };
        $.ajax(settings).done(function (response) {
            console.log(response);
        });
    })
})

如何有效调试对 MailChimp 3.0 服务器的 JQuery GET 请求？

How do I effectively debug a JQuery GET request to MailChimp 3.0 servers?

javascript

jquery

get

mailchimp-api-v3.0