通过 HttpClient 使用 Mailgun 时出现 CORS 问题

Question

我正在使用 Angular 7 并尝试使用 Mailgun API 发送电子邮件，即使在我这边启用了 headers origin 请求后，我也收到了以下 CORS 策略错误。这是服务器端造成的吗？或者我是否必须对下面的代码进行一些更改才能使其工作？

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

@Injectable({
  providedIn: 'root'
})
export class MailService {
  constructor(private http: HttpClient) { }

  sendEmail() {
    const header = new HttpHeaders({
      'Authorization': 'Basic ' + 'api:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      'Access-Control-Allow-Headers': 'Content-Type, x-requested-with',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS'
    });

    const formData = new FormData();
    formData.append('from', 'zname <[email protected]>');
    formData.append('to', '[email protected]');
    formData.append('subject', 'Hello');
    formData.append('text', 'This is cool !');

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

Answer 1

Mailgun 的文档明确禁止您这样做（并且有充分的理由）

注意：如果在浏览器中使用，由于 cors 限制，需要代理与 Mailgun api 通信。另外，请勿在前端代码中发布您的私有 api 密钥。

https://github.com/mailgun/mailgun.js#mailgunjs-

对电子邮件等服务进行这样的调用类似于直接从浏览器进行数据库调用。有许多安全攻击面被打开。