Firebase Cloud Functions 和 Angular 的 CORS 问题答案

【问题标题】：CORS issue with Firebase Cloud Functions and AngularFirebase Cloud Functions 和 Angular 的 CORS 问题
【发布时间】：2020-03-30 18:54:15
【问题描述】：

我正在尝试使用 Firebase Cloud Functions 和 Sendgrid 向我的客户发送电子邮件。当我将请求发送到我的 Angular 应用程序中的函数时，出现以下错误：

我已经尝试在我的 Angular 项目中使用代理配置，但它不起作用。

这是我的火力基地功能：

import * as functions from "firebase-functions";
import * as sendgrid from "sendgrid";
import * as corsModule from "cors";

exports.httpEmail = functions.https.onRequest((req, res) => {
  cors(req, res, () =>
    Promise.resolve()
      .then(() => {
        if (req.method !== "POST") {
          throw new Error("Only POST requests are accepted");
        }

        const request = client.emptyRequest({
          method: "POST",
          path: "v3/mail/send",
          body: parseBody(req.body)
        });

        return client.API(request);
      })
      .then(response => {
        if (response.body) {
          res.send(response.body);
        } else {
          res.end();
        }
      })
      .catch(err => {
        console.error(err);
        throw new Error(err);
      })
  );
});

这就是我所说的：

import { HttpClient, HttpHeaders, HttpParams } from "@angular/common/http";

sendEmail(emailAddress, content) {
    const url = functionURL;
    const params: HttpParams = new HttpParams();
    const headers = new HttpHeaders({
     "Content-Type": "application/json",
     "Access-Control-Allow-Origin": "*"
   });

   params.set("to", emailAddress);
   params.set("from", "myEmail@gmail.com");
   params.set("content", content);

   return this.http
     .post(url, params, { headers: headers })
     .toPromise()
     .then(res => (this.emailSend = true))
     .catch(err => console.error(err));
  }

感谢您的帮助。

【问题讨论】：

你解决了吗？

标签： angular firebase cors google-cloud-functions

【解决方案1】：

尝试在 .htaccess 文件中添加以下内容

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

【讨论】：

【解决方案2】：

我也尝试过使用代理，但它不起作用。您将实施的任何方法都可能适用于某些服务，但不能保证适用于所有服务。这通常发生在您的服务未启用 cors 时。在简单的 https 你需要在你的云上启用你使用的任何一个，但要让它花费你。您可以手动编写代码，但是。你需要为每一个服务都写，这对于大型应用程序来说会让人头疼

我使用 chrome disable security one 来测试应用程序。你也应该尝试一下

【讨论】：