2015-05-01 17 views
5

Ben Mandrill ile JavaScript kullanarak bir e-posta göndermek için nasıl this kılavuzu takip ettim ama benim konsolda bu hatayı alıyorum: 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. İşteMandrill ile JavaScript kullanarak nasıl bir e-posta gönderilir?

kodum edilir:

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

Neyi yanlış yapıyorum?

+0

API anahtarı herkes tarafından görülebilir unutmayın, bu nedenle herhangi bir kötü niyetli kullanıcı kota/spam hesabınız maalesef size – baao

cevap

4

Aksine POST isteğinde bulunurken yerine, sizin <head> bir <script> etiketinde Mandrill API içermelidir:

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

Daha sonra JS dosyasına erişebilirsiniz: Ancak

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

, , API'nızın genel araçları'a açacağını, bu nedenle dev araçlarını kullanarak istemci tarafından erişilebileceğini unutmayın. Bu sizi kimlik avı güvenlik açıklarına açabilir ve birisi anahtarınızı kötüye kullanabilir.

send için full Mandrill docs'a da bakarım.

0

Mandrill API'sına tarayıcıdan erişemezsiniz - bu, güvenlik nedeniyle tasarım gereğidir. API Anahtarınızın web sitenizi ziyaret eden herkese nasıl maruz kalacağını görün.

Sunucunuza bir AJAX isteği yapmak ve ardından arka uç uygulama kodunuzdan Mandrill API'sini aramak istersiniz.

+2

engellenecektir kadar çok insan kadar yiyebilir e-postalar göndermek için anahtar kullanabilir ona erişebilir ve birçok kişi henüz hiçbir sonuç vermeden onu kullanır. – GorillaApe

4

Harika, işte formu göndermek için Jquery'yi kullanarak bir çözüm. :)

Web sitemde jquery + mandrill kullanarak bir iletişim formu oluşturmaya çalışıyordum. Yukarıdaki cevabı yararlı bulmuyorum (suç unsuru yok) Bu yüzden cevabımın bunu temizleyeceğini umuyorum. İyi arkadaşım & Geliştirici Thomas Lane @ d00by'den yardım aldım.

Lütfen aşağıdaki formuma bakınız. Ve benim formumun altında javascript.

  • göndermek üzerinde formu
  • dönüş yanlış
  • Çağrı işlevini göndermek için formu
  • kullanın ajax oluşturun.

Mandrill'i kullanmak için bir API anahtarına ihtiyacınız olacaktır.

<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; 
} 
+0

Şu anda mevcut mü? – Hiroto

+0

Sorunu anlamıyorum ... –

İlgili konular