CODEWITHSUNDEEP
javascriptnode.jsfirebasegoogle-cloud-functions
Friendly Mushroom
Friendly Mushroom

Reputation: 205

CORS Policy error in firebase V9 on an onCall firebase function

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!

Upvotes: 6

Views: 944

Answers (2)

Gal Zakay
Gal Zakay

Reputation: 434

Try this

import { connectFunctionsEmulator } from "firebase/functions";

connectFunctionsEmulator(functions, "localhost", 5001);

Upvotes: 1

Friendly Mushroom
Friendly Mushroom

Reputation: 205

I couldn't find a better way than just downgrading to [email protected] 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()
}

Upvotes: 0

Related Questions