6

I have followed this guide on how to send an email using JavaScript with Mandrill, but am receiving this error in my console: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mandrillapp.com/api/1.0/messages/send.json. This can be fixed by moving the resource to the same domain or enabling CORS.

Here is my code:

$('#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);
  });
});

What am I doing wrong?

Ralph David Abernathy
  • 5,230
  • 11
  • 51
  • 78
  • 1
    Keep in mind that your API key is visible to anyone, so any malicious user may use your key to send out emails that can eat up your quota/spam so many people that your account will be blocked – baao May 01 '15 at 21:47

3 Answers3

4

Rather than making a POST request, you should include the Mandrill API in a <script> tag in your <head>:

<script type="text/javascript" src="path_to_locally_stored_copy_of_mandrill_API"></script>

You can then access it in your JS file:

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
        }
    });
}

However, note that this will expose your API to the public, as it will be accessible from the client side using dev tools. This can open you up to phishing vulnerabilities and someone could abuse your key.

I'd also take a look at the full Mandrill docs for send.

AstroCB
  • 12,337
  • 20
  • 57
  • 73
4

Cool, here's a solution using Jquery to send the form. :)

I was attempting to make a contact form on my website using jquery + mandrill. I did not find the above answer helpful (no offense bro) So i'm hoping that my answer can clear this up. I got some help from my good friend & Developer Thomas Lane @d00by.

Please see below my form. And below my form the javascript.

  • Create form
  • Use ajax to submit form
  • return false
  • Call function on submit.

In order to use mandrill you will need an API key.

<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;
}
Ettore Raimondi
  • 68
  • 5
2

You cannot access the Mandrill API from a browser - this is by design, for security reasons. See how your API Key will be exposed to anyone visiting your website?

You'll want to make an AJAX request to your server, and then call the Mandrill API from your backend application code.

bvanvugt
  • 1,212
  • 1
  • 8
  • 15