CORS Policy error in firebase V9 on an onCall firebase function

Question

I have the problem that as soon as I want to make a call to my firebase functions I get a Cors policy Error. I have already read multiple questions about that but I couldn't find one that solves the issue in the Firebase version 9. The call syntax is different in v9. And I can't figure out how to solve it.

Error:

Access to fetch at 'https://us-central1-mmonitor-19efd.cloudfunctions.net/sendRequest' from origin 'http://localhost:3000' 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.

Firebase Initialization:

import { initializeApp } from 'firebase/app';
import { getFunctions } from 'firebase/functions';

const firebaseConfig = {
  apiKey: "XXXX",
  authDomain: "XXXX",
  projectId: "XXXX",
  storageBucket: "XXXX",
  messagingSenderId: "XXXX",
  appId: "XXXX",
  measurementId: "XXXX"
};
export const firebaseApp = initializeApp(firebaseConfig);
export const functions = getFunctions()

Function Call:

import { firebaseApp, functions } from "./firebase"
import { httpsCallable } from 'firebase/functions';

function sendRequest(e) {
    const sendRequest = httpsCallable(functions, 'sendRequest');
    sendRequest()
}
function App() {
    return (
        <button onClick={sendRequest}>send Request</button>
    );
}
export default App;

Firebase Functions:

const functions = require("firebase-functions");

exports.sendRequest = functions.https.onCall(async(data, context) => {
    console.log("ok")
});

Note: (I am using the emulator at the moment) Note: (I tried to change the location of the server but I am not sure how to do that in the emulator and in the frontend in v9)

Thank you for your time!

Have you check [this answer](https://stackoverflow.com/questions/50278537/firebase-callable-function-cors) ? — Dharmaraj, Sep 08 '21 at 16:51
@Dharmaraj Yes I tried to change the location of the client but I can't figure out how to do that in the v9 syntax. I also can't find anything in the documentation about that — Friendly Mushroom, Sep 08 '21 at 16:54
Try setting the region by `getFunctions(firebaseApp, "region-name")` — Dharmaraj, Sep 08 '21 at 16:57
@Dharmaraj I now wrote the following: export const functions = getFunctions(firebaseApp, "127.0.0.1:3000") I now the CORS Error is gone but I get the following error with no explanation: Uncaught (in promise) FirebaseError: internal — Friendly Mushroom, Sep 08 '21 at 17:07

score 1 · Answer 1 · answered Apr 03 '22 at 17:29

1

Try this

import { connectFunctionsEmulator } from "firebase/functions";

connectFunctionsEmulator(functions, "localhost", 5001);

answered Apr 03 '22 at 17:29

Gal Zakay

286
2
4

score 0 · Answer 2 · answered Sep 09 '21 at 16:09

I couldn't find a better way than just downgrading to firebase@8.10.0 and using the following code:

Firebase init:

import firebase from "firebase/app";
import "firebase/functions"

const firebaseConfig = {
    apiKey: "XXXX",
    authDomain: "XXXX",
    projectId: "XXXX",
    storageBucket: "XXXX",
    messagingSenderId: "XXXX",
    appId: "XXXX",
    measurementId: "XXXX"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


firebase.functions().useEmulator("localhost", 5001);


export default firebase

Funcion Call:

import firebase from "./firebase.js";


function sendRequest(e) {
  const sendRequest = firebase.functions().httpsCallable('sendRequest');
  sendRequest()
}

CORS Policy error in firebase V9 on an onCall firebase function

2 Answers2