如何修复被 cors 策略阻止的 Angular 第三方 API 调用？答案

【问题标题】：How to fix Angular third party API call blocked by cors policy?如何修复被 cors 策略阻止的 Angular 第三方 API 调用？
【发布时间】：2021-04-08 17:04:51
【问题描述】：

我创建了一个简单的应用程序，其中包含第三方电子邮件发送 api 实现，以通过联系表单获取电子邮件。当我在本地主机或 github 页面上运行应用程序时，我收到此错误：

Access to XMLHttpRequest at 'https://api.mailjet.com/v3.1/send' from origin 'https://myrepo.github.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

该问题的解决方案是什么。显然我不能在 API 端应用任何解决方案，我所要做的就是从我的角度代码。这是我在 http post 请求中实现的内容

sendMail(): Observable<any>{
    let API_URL='https://api.mailjet.com/v3.1/send';
    let data={
      "Messages":[
        {
          "From": {
            "Email": "myemail@gmail.com",
            "Name": "My Name"
          },
          "To": [
            {
              "Email": "myemail@gmail.com",
              "Name": "My Name"
            }
          ],
          "Subject": "My first Mailjet email",
          "TextPart": "Greetings from Mailjet.",
          "HTMLPart": "<h3>Dear passenger 1, welcome to <a href=https://www.mailjet.com/>Mailjet</a>!</h3><br />May the delivery force be with you!",
          "CustomID": "AppGettingStartedTest"
        }
      ]
    };
    console.log('sending email....')
    console.log(data);
    this.httpClient.post<any>(API_URL,data,{
      headers: new HttpHeaders({
        'Content-Type':'application/json',
        'Authorization':'Basic VGIzOTIsasdasdasdasdasdrewetwfdsfasdasMjI0NWUVcDFGA='
      })
    }).subscribe(res=>{
      console.log(res);
    },err=>{
      console.log(err);
    });
    return null;//ignoring this for now.

  }

【问题讨论】：

我想这是 CORS 的全部意义，你不能只在客户端工作。
我知道我可以通过使用 cors disable 选项运行 chrome 来绕过这个问题。但这不是最终的解决方案。另外，mailjet 提供了一个功能 API，所以我不能说他们的 API 不起作用。他们的 API 也由 postman 工作。

标签： angular mailjet

【解决方案1】：

你不能。您必须使用像 PHP 这样的服务器端实现，因为据我所知，您无法使用 mailjet 通过客户端发送电子邮件。这也不安全，因为您必须在 Angular 应用程序中提及您的 API 密钥。想象一下，如果有人对您的 Angular 应用程序进行逆向工程，并读取您的 API 密钥？通过 Angular 服务文件中的以下 Typescript 函数向您的 PHP 文件发送请求。确保同时指定其 URL。内容具有三个属性，电子邮件、主题和消息。在将它们传递给 sendEmail 函数的参数之前，您必须为它们分配值。

客户端实现

  public sendEmail(content: object): Observable<any> {
    return this.httpClient.post(this.SMTPURL, JSON.stringify(content));
  }

服务器端实现

<?php 

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);

function sanitizeEmail($email) {
    return filter_var($email, FILTER_SANITIZE_EMAIL);
}

function sanitizeMessage($message) {
    return filter_var($message, FILTER_SANITIZE_STRING);
}

function sanitizeSubject($subject) {
    return  filter_var($subject, FILTER_SANITIZE_STRING);
}

if($request->request) {
    $to_email = sanitizeEmail($request->email);
    $subject = sanitizeSubject($request->subject);
    $message = sanitizeMessage($request->message);
    mail($to_email, $subject, $message);    
    echo json_encode("Email was sent to " . $to_email . "\n " . $subject . "\n " . $message);
} else {
    echo 'Unable to Handle the request';
}


?>

【讨论】：

【解决方案2】：

我认为您应该配置您的 Web 服务器以代理该服务器或使用配置 Angular CLI 代理进行开发。

【讨论】：

【解决方案3】：

根据this question，最好有一个与您的 API 对话的服务器端函数。我不知道是不是你的情况，但它可以工作

【讨论】：