Firebase https onCall-Funktion durch cors blockiert

Question

Ich habe eine sendMailCloud-Funktion, mit der ich E-Mails von einem Kontaktformular auf meiner Website senden möchte. Die Website wird auf Firebase mit einer benutzerdefinierten Google-Domain gehostet. Das Problem ist, dass ich diesen Fehler immer dann erhalte, wenn ich versuche, die Funktion von der gehosteten Site aus aufzurufen.

Folgendes habe ich bisher versucht

1. Ich habe versucht, die Funktion lokal über den Browser zu testen, und es funktioniert einwandfrei. Kein cors Fehler.
2. Das Testen durch Aufrufen der Funktion über die Firebase-Shell funktioniert auch ohne Cors-Fehler.

1. Ich habe meine Google Cloud-Konsole überprüft und sichergestellt, dass alle Benutzer die Funktion aufrufen können.
   

4. Ich habe auch versucht, die cors-Bibliothek zum Umschließen der Funktion zu verwenden, aber das hat auch nicht funktioniert:

So rufe ich meine sendMailFunktion auf:

handleSubmit = (e) => {
    e.preventDefault();
    const sendMail = firebase.app().functions('us-central1').httpsCallable("sendMail");
    
    sendMail({ details: this.state })
      .then((res) => {
        this.setState({
          loading: true,
        });
        this.notify("success");
      })
      .catch((error) => {
        this.notify(error);
      });
  };

Hier ist die gesamte sendMailFunktion:

const functions = require("firebase-functions");
const admin = require("firebase-admin");
const cors = require("cors")({ origin: true });
const nodemailer = require("nodemailer");

admin.initializeApp();

// Use gmail to set up transporter
let transporter = nodemailer.createTransport({
  service: "gmail",
  auth: {
    user: functions.config().mail.user,
    pass: functions.config().mail.pass
  },
});

exports.sendMail = functions
  .region("us-central1")
  .https.onCall((data, context) => {
    const info = data.details;
    const mailOptions = {
      from: `${info.name} <${info.email}>`,
      to: functions.config().mail.dest,
      subject: info.subject,
      html: `<p style="font-size: 16px;">${info.name}, ${info.email}</p>
                    <p
                    style="
                        font-size: 1rem;
                        background: #FFECB3;
                        padding: 10px;
                        border-radius: 10px;">${info.message}</p>
                `, // email content in HTML
    };

    // returning results
    return transporter.sendMail(mailOptions, (err, info) => {
      if (err) {
        console.log("failed", err);
      }
    });
  });

Ich weiß, dass ähnliche Fragen gestellt wurden, aber ich habe wirklich fast alles versucht. Ich bekomme das Cors-Problem NUR, wenn ich es von meiner in Firebase gehosteten Site aus aufrufe. Jemand, bitte helfen Sie!

Answer 1

onCall funktioniert anders als onRequest in Bezug auf die Cors. Sie müssen beispielsweise sicherstellen, dass Sie es aus derselben Region aufrufen. Siehe diesen Beitrag

Das cors-Problem kann auftreten, wenn Ihre Funktion fehlerhaft ist, es sich lohnt, den Emmulator und Ihre Antwort auf das Senden von E-Mails zu überprüfen.