如何使用JavaScript使用Mandrill发送电子邮件？

我遵循了关于如何使用带Mandrill的JavaScript发送电子邮件的指南，但在我的控制台中收到了以下错误：

跨源请求被阻止：同源策略不允许在https://mandrillapp.com/api/1.0/messages/send.json. 这可以通过将资源移动到同一域或启用CORS来解决。

这是我的密码：

$('#submitEmail').click(function() {
  $.ajax({
    type: "POST",
    url: "https://mandrillapp.com/api/1.0/messages/send.json",
    data: {
      'key': 'my_api_key',
      'message': {
        'from_email': 'test@hotmail.com',
        'to': [{
          'email': 'test@gmail.com',
          'name': 'RECIPIENT NAME (OPTIONAL)',
          'type': 'to'
        }],
        'autotext': 'true',
        'subject': 'test',
        'html': 'test'
      }
    }
  }).done(function(response) {
    console.log(response);
  });
});

---

我做错了什么？

您无法从浏览器访问Mandrill API-出于安全原因，这是出于设计考虑。查看API密钥将如何向访问您网站的任何人公开

---

您需要向服务器发出AJAX请求，然后从后端应用程序代码调用Mandrill API。

而不是发出POST请求，您应该在

中包含in

标记：

但是，请注意，这将向公众公开API，因为可以使用开发工具从客户端访问API。这会使您面临网络钓鱼漏洞，有人可能会滥用您的密钥

---

我还想看一下for

send

很酷，这里有一个使用Jquery发送表单的解决方案：

我试图使用jquery+mandrill在我的网站上制作一个联系表单。我觉得上面的答案没有帮助（无意冒犯兄弟），所以我希望我的答案能澄清这一点。我从我的好友兼开发者Thomas Lane@d00by那里得到了一些帮助

请看下面我的表格。在我的表单下面是javascript

• 创建表单
• 使用ajax提交表单
• 返回错误
• 在提交时调用函数

为了使用mandrill，您需要一个API密钥

<form id="contact-form" method="POST" action="" onsubmit="return   submitContactForm();" class="margin-top" role="form">

                <div class="row">
                    <div class="form-group">
                        <i class="fa fa-check-circle fa-2 check" aria-hidden="true"></i>
                        <input id="form_name" type="text" name="name" class="form-control" placeholder="Full Name" required="required" data-error="Firstname is required.">
                    </div>
                </div>

                <div class="row">
                    <div class="form-group">
                        <i class="fa fa-check-circle fa-2 check" aria-hidden="true"></i>
                        <input id="form_email" type="text" name="name" class="form-control" placeholder="Email" required="required" data-error="E-mail is required.">
                    </div>
                </div>

                <div class="row">
                    <div class="form-group">
                        <i class="fa fa-check-circle fa-2 check" aria-hidden="true"></i>
                        <input id="form_phone" type="text" name="name" class="form-control" placeholder="Phone" required="required" data-error="Phone Number is required.">
                    </div>
                </div>

                <div class="row">
                    <div class="form-group">
                        <i class="fa fa-check-circle fa-2 check" aria-hidden="true"></i>
                        <textarea id="form_message" name="message" class="form-control" placeholder="Message" rows="2" required="required" data-error="Please,leave us a message."></textarea>
                    </div>
                </div>
                     <button class="btn btn-primary text-center submit" type="submit">Send</button>
            </form>



     function submitContactForm() {
         /*var name = $('#form_name').val();
  var email = $('#form_email').val();
  var phone = $('#form_phone').val();
  var message =$('#form_message').val();*/

//this is the html template. You can also do it as used above. But is much simpler done as below

 var htmlMessage = 'Contact form<br/>' +
    'Name: '+$('#form_name').val()+'<br/>'+
    'EMail: '+$('#form_email').val()+'<br/>'+
    'Message<br/>'+
    $('#form_message').val();

//submit the form using ajax
  $.ajax({
  type: "POST",
  url: "https://mandrillapp.com/api/1.0/messages/send.json",
  data: {
    "key": 'Your API key here',
    "message": {
      "from_email": 'your email',
      "to": [
        {
          "email": 'form email',
          "name": 'name',
          "type": 'to'
        }
      ],
      "subject": 'Subject',
      "html": htmlMessage
    }
  }
});

  return false;
}

发送
函数submitContactForm（）{
/*var name=$（'#form_name'）.val（）；
var email=$（'#form#email'）.val（）；
var phone=$（'#form_phone'）.val（）；
var message=$（'#form_message'）.val（）*/
//这是html模板。您也可以按照上面的方法来做。但要简单得多，如下所示
var htmlMessage='联系方式
'+
'Name:'+$（'#form_Name'）.val（）+'
'+
'EMail:'+$（'#form_EMail'）.val（）+'
'+
“消息
”+
$（'form#u message'）.val（）；
//使用ajax提交表单
$.ajax({
类型：“POST”，
url:“https://mandrillapp.com/api/1.0/messages/send.json",
数据：{
“密钥”：“此处为您的API密钥”，
“信息”：{
“来自电子邮件”：“您的电子邮件”，
“致”：[
{
“电子邮件”：“格式电子邮件”，
“名称”：“名称”，
“类型”：“至”
}
],
“主题”：“主题”，
“html”：htmlMessage
}
}
});
返回false；
}

请记住，您的API密钥对任何人都是可见的，因此，任何恶意用户都可能使用您的密钥发送电子邮件，这些电子邮件可能会吞噬您的配额/垃圾邮件，导致您的帐户被拦截。您可以访问它，许多人使用它，而不会产生任何后果。它现在可用吗？这是否仍然会暴露您的api密钥？这是一个巨大的安全问题。您不应该公开您的API密钥。

var m = new mandrill.Mandrill('your_api_key'); // This will be public

function sendTheMail(){
    m.messages.send({
        "message": {
            "from_email": "your_email_address",
            "from_name": "your_name",
            "to":[{"email": "someone's_email_address", "name": "someone's_name"}], // Array of recipients
            "subject": "optional_subject_line",
            "text": "Text to be sent in the body" // Alternatively, use the "html" key to send HTML emails rather than plaintext
        }
    });
}

<form id="contact-form" method="POST" action="" onsubmit="return   submitContactForm();" class="margin-top" role="form">

                <div class="row">
                    <div class="form-group">
                        <i class="fa fa-check-circle fa-2 check" aria-hidden="true"></i>
                        <input id="form_name" type="text" name="name" class="form-control" placeholder="Full Name" required="required" data-error="Firstname is required.">
                    </div>
                </div>

                <div class="row">
                    <div class="form-group">
                        <i class="fa fa-check-circle fa-2 check" aria-hidden="true"></i>
                        <input id="form_email" type="text" name="name" class="form-control" placeholder="Email" required="required" data-error="E-mail is required.">
                    </div>
                </div>

                <div class="row">
                    <div class="form-group">
                        <i class="fa fa-check-circle fa-2 check" aria-hidden="true"></i>
                        <input id="form_phone" type="text" name="name" class="form-control" placeholder="Phone" required="required" data-error="Phone Number is required.">
                    </div>
                </div>

                <div class="row">
                    <div class="form-group">
                        <i class="fa fa-check-circle fa-2 check" aria-hidden="true"></i>
                        <textarea id="form_message" name="message" class="form-control" placeholder="Message" rows="2" required="required" data-error="Please,leave us a message."></textarea>
                    </div>
                </div>
                     <button class="btn btn-primary text-center submit" type="submit">Send</button>
            </form>



     function submitContactForm() {
         /*var name = $('#form_name').val();
  var email = $('#form_email').val();
  var phone = $('#form_phone').val();
  var message =$('#form_message').val();*/

//this is the html template. You can also do it as used above. But is much simpler done as below

 var htmlMessage = 'Contact form<br/>' +
    'Name: '+$('#form_name').val()+'<br/>'+
    'EMail: '+$('#form_email').val()+'<br/>'+
    'Message<br/>'+
    $('#form_message').val();

//submit the form using ajax
  $.ajax({
  type: "POST",
  url: "https://mandrillapp.com/api/1.0/messages/send.json",
  data: {
    "key": 'Your API key here',
    "message": {
      "from_email": 'your email',
      "to": [
        {
          "email": 'form email',
          "name": 'name',
          "type": 'to'
        }
      ],
      "subject": 'Subject',
      "html": htmlMessage
    }
  }
});

  return false;
}