Angulaire 2: Envoi d'e-mail avec Mailgun dans Ionic 2

Question

J'essaye d'implémenter la notification d'email à mon application en utilisant Mailgun dans Angular 2. Mais j'obtiens l'erreur de console quand j'exécute la fonction send(). Je ne sais pas comment le résoudre, j'espère que vous pourrez m'aider merci d'avance. Voici mon code:

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import { Http, Headers, RequestOptions } from "@angular/http"; 
import "rxjs/Rx"; 

import { TabsPage } from '../tabs/tabs'; 

@IonicPage() 
@Component({ 
    selector: 'page-confirmorder', 
    templateUrl: 'confirmorder.html', 
}) 
export class ConfirmorderPage { 

    recipient: string = "sampleemail@gmail.com"; 
    subject: string = "FirstTesting"; 
    message: string = "Hello, this is just a drill."; 
    mailgunUrl: string = "<--My Domain-->"; 
    apiKey: string = "<--My API Key-->"; 

    tabBarElement: any; 

    constructor(public http: Http, public navCtrl: NavController, public navParams: NavParams) { 

    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad ConfirmorderPage'); 
    } 

    send() { 
     if(this.recipient && this.subject && this.message) { 
      let headers = new Headers(
       { 
        "Content-Type": "application/x-www-form-urlencoded", 
        "Authorization": "Basic " + this.apiKey 
       } 
      ); 
      let options = new RequestOptions({ headers: headers }); 
      let body = "from=email@sample.com&to=" + this.recipient + "&subject=" + this.subject + "&text=" + this.message; 
      this.http.post("https://api.mailgun.net/v3/" + this.mailgunUrl + "/messages", body, options) 
       .map(result => result.json()) 
       .do(result => console.log("RESULT: ", JSON.stringify(result))) 
       .subscribe(result => { 
        console.log("SENT!"); 
        this.navCtrl.setRoot(TabsPage); 
        this.recipient = ""; 
        this.subject = ""; 
        this.message = ""; 
       }, error => { 
        console.log(error); 
       }); 
     } 
    } 

} 

Et voici l'erreur de la console:

XMLHttpRequest cannot load https://api.mailgun.net/v3/<--My Domain-->/messages. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response. 

Answer 1

CORS est une caractéristique chrome qui empêche les demandes de domaine croisées à moins que le serveur le permet.

Dans ce cas particulier, le serveur n'accepte pas l'en-tête Autorisation.

Si vous le faites depuis votre backend et non pas en chrome, cela devrait fonctionner correctement.

Faites-le à partir de votre backend et non angulaire.

De même, vous ne devriez pas mettre votre clé/secret api sur le client parce qu'ils deviennent publics.