带mailgun的Angular 4

Question

I am trying to make a simple email form for one of my websites that allows people to contact me. This site is using angular 4, and mailgun as the mail service. In my mail service file I have this method that sends the message, but I am getting a Bad Request error saying from is not present.

  public sendMail(){ let url = 'https://api.mailgun.net/v3/XXXXXXXXXXXX.mailgun.org/messages'; let headers: Headers = new Headers(); headers.append('Authorization','Basic '+ btoa('api:key-XXXXXXXXXXXXXXXXXXX')); headers.append("Content-Type", "application/x-www-form-urlencoded"); let opts: RequestOptions = new RequestOptions(); opts.headers = headers; this.http.post(url, { from: '"Mailgun Sandbox" <postmaster@XXXXXXXXXX.mailgun.org>', to: "Test <test@gmail.com>", subject: 'Hello ', text: 'Congratulations, you just sent an email with Mailgun! You are truly awesome!' }, opts ).subscribe( success => { console.log("SUCCESS -> " + JSON.stringify(success)); }, error => { console.log("ERROR -> " + JSON.stringify(error)); } ); } 

I am having a hard time understanding why from is showing up not as present when I send the request. Any help is great.

Answer 1

import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class PostService {

  constructor(private http: HttpClient) {
  }

  sendMail() {
    const headers = new HttpHeaders({
      'enctype': 'multipart/form-data',
      'Authorization': 'Basic ' + btoa('api:xxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxx-xxxxxx')
    });

    const formData = new FormData();
    formData.append('from', 'Mailgun Sandbox <postmaster@sandboxxxxxxxxxxxxxx.mailgun.org>');
    formData.append('to', 'xxxxxxxxxxxxxx.com');
    formData.append('subject', 'Hello');
    formData.append('text', 'This is cool !');

    this.http
      .post(
        'https://api.mailgun.net/v3/sandboxxxxxxxxxxxxxxxxxxxxxxxxxxb.mailgun.org/messages',
        formData,
        { headers }
      ).subscribe(
        res => { console.log('res : ', res); },
        err => { console.log('err : ', err); }
      );
  }
}