Função https onCall do Firebase bloqueada por cors

Question

Tenho uma sendMailfunção de nuvem que desejo usar para enviar e-mails de um formulário de contato em meu site. O site está hospedado no Firebase com um domínio personalizado do Google. O problema é que recebo esse erro sempre que tento invocar a função do site hospedado.

Aqui está o que eu tentei até agora

1. Eu tentei testar a função localmente no navegador e funciona muito bem. Nenhum erro de cors.
2. O teste invocando a função do shell do firebase também funciona bem, sem erros de cors.

1. Verifiquei meu console do Google Cloud e certifique-se de que todos os usuários podem invocar a função.
   

4. Também tentei usar a biblioteca cors para encapsular a função, mas também não funcionou:

Aqui está como estou chamando minha sendMailfunção:

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);
      });
  };

Aqui está a sendMailfunção completa :

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);
      }
    });
  });

Sei que perguntas semelhantes foram feitas, mas realmente tentei quase tudo. SOMENTE recebo o problema de cors ao invocá-lo do meu site hospedado no Firebase. Alguém, por favor ajude!

Answer 1

onCall funciona de maneira diferente do onRequest em relação aos cors, por exemplo, você precisa garantir que está chamando-o da mesma região. Veja esta postagem

O problema de cors pode ocorrer se sua função estiver errada, vale a pena verificar no emmulador e sua resposta de envio de email.