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?