Angular 2：在Ionic 2中使用Mailgun發送電子郵件

Question

我試圖在Angular 2中使用Mailgun將電子郵件通知發送到我的應用程序。但是當我執行send()函數時，我收到控制檯錯誤。我不知道如何解決它，希望你能提前幫助我。這裏是我的代碼：

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

} 

，這裏是控制檯錯誤：

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是鉻功能，防止跨域請求，除非服務器允許的情況。

在這種特殊情況下，服務器不接受授權標頭。

如果你是從你的後端做到這一點，而不是鉻這應該工作正常。

從您的後端做到這一點，而不是角度。

此外，你不應該把你的api密鑰/祕密放在客戶端，因爲它們是公開的。