How to send an email with Mandrill using JavaScript?
Question
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. 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?
3 answers
solution1
5 ACCPTED 2015-05-02 02:55:24
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 .
solution2
4 2016-07-07 13:04:41
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;
}
solution3
0 2015-05-02 02:23:40
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.