0

I have a firebase app (its a simple website) that I am trying to use to capture emails via a simple subscribe input area and I want those emails to go into mailchimp. It seems easy but it is turning out to be a horribly complicated thing - maybe I am missing something.

I have added a Firebase Mailchimp extension and I am calling the extension like so, from within my firebase app:

import { getFunctions, httpsCallable } from "@firebase/functions";
import { initializeApp } from '@firebase/app';

export default function Newsletter() {
  const [email_address, setEmail_Address] = useState("");
  const [successMessage, setSuccessMessage] = useState(false);

  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmail_Address(e.target.value);
    setSuccessMessage(false);
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();


    const data = {
      email: email_address,
      uid: Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
    };

    const app = initializeApp({
      apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
      authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
      projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    });
    
    const functions = getFunctions(app);
    const addUserToList = httpsCallable(functions, 'ext-mailchimp-firebase-sync-addUserToList');
    addUserToList(data)
      .then((result) => {
        // Read result of the Cloud Function.
        //console.log(result.data);
        if (result.data) {
          setEmail_Address("");
          setSuccessMessage(true);
        }
      })
      .catch((error) => {
        // Getting the Error details.
        console.log(error);
      });

But I am getting the following error:

Access to fetch at 'https://us-central1-epoch-main-1.cloudfunctions.net/ext-mailchimp-firebase-sync-addUserToList' from origin 'https://www.epoch.blue' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

It sounds like I need to set the CORS policy in the Firebase Mailchimp extension, but I don't know how to do that. Does any know?

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Jinal
  • 1

0 Answers0