Firebase 可调用云 Function CORS 错误使用 Z035489FF8D092741943E4A83241F5

Question

The following is the client-side code to call the cloud function:

// add a new post
addPostForm.addEventListener('click', (e) => {
  e.preventDefault();
  
  const addPost = httpsCallable(functions, 'addPost');
  addPost({
    title: addPostForm.postTitle.value,
    description: addPostForm.postDescription.value,
  })
  .then(() => {
    addPostForm.reset(),
    addPostModal.classList.remove('open');
    addPostForm.querySelector('.error').textContent = '';
  })
  .catch(error => {
    addPostForm.querySelector('.error').textContent = error.message;
  })
});

The cloud function:

exports.addPost = functions.https.onCall((data, context) => {
    if(!context.auth){
        throw new functions.https.HttpsError(
            'unauthenticated',
            'only authenticated users can post'
        );
    }
    if(data.text.length > 140){
        throw new functions.https.HttpsError(
            'invalid-argument',
            'description must be no more than 140 characters long'
        );
    }
    return admin.firestore().collection('Posts').add({
        title: data.title,
        description: data.description,
        likes: '',
        bookmarks: '',
    });
});

Firebase Setup:

import { initializeApp, getApp } from "firebase/app";
import { getAuth, connectAuthEmulator } from "firebase/auth";
import { getStorage, connectStorageEmulator } from "firebase/storage";
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
import { getFunctions, connectFunctionsEmulator } from "firebase/functions";

const firebaseConfig = {
"config"
  };
  
  // Initialize Firebase 
  const app = initializeApp(firebaseConfig);

  const auth = getAuth(app);
  const db = getFirestore(app);
  const storage = getStorage(app);
  const functions = getFunctions(getApp(), app);
  
  if (window.location.hostname.includes("localhost")) {
    connectAuthEmulator(auth, "http://localhost:9099");
    connectFirestoreEmulator(db, 'localhost', 8080);
    connectStorageEmulator(storage, 'localhost', 9199);
    connectFunctionsEmulator(functions, "localhost", 5001);
}

  export { auth, db, storage, functions };

Error Access to fetch at 'http://localhost:5001/app/object/addPost' From origin 'http://localhost:5173' 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.

What's the problem here? Will I need to set up firebase admin to grant access rights, and if I turn CORS off in the browser will that present a security issue on production?

Answer 1

As mentioned in the Answer , you can follow the checklist for the firebase callable functions cors errors:

1. Ensure the function is deployed.
2. Ensure the function name is correct. I was calling recalculatY when it should have been recalculateY . Got a cors error for some reason.
3. Ensure the function code itself is not throwing an error. Use the emulator to help. This didn't throw a cors error, still helpful to know.
4. Ensure your regions match - I am using europe-west2 . I had to both deploy the function with that region, and call it using the region. For a while, I assumed the client would infer the correct region if the function name was correct.

you can refer to the Documentation which explains about how to connect your app to cloud function emulator.

Before connecting your app to the Cloud Functions emulator, make sure that you nderstand the overall Firebase Local Emulator Suite workflow , and that you install and configure the Local Emulator Suite and review its CLI commands .

you can refer to the Answer where below has been pointed out:

For users who have the CORS preflight problem with the firebase local emulator , if you're using Webpack or Vue ( vue-cli ), you can resolve the situation with a proxy:

my-firebase-initialize-file.js (client side)

 firebase.functions().useFunctionsEmulator('http://localhost:1234/api'); // Client url + /api ``` **webpack.config.js** or **vue.config.js** *(client side, at the root, next to `package.json`)* ```lang-js module.exports = { devServer: { proxy: { "^/api": { target: "http://localhost:5001", // Emulator's url pathRewrite: { "^/api": "" }, ws: true, changeOrigin: true } } } }; ``` Now every `http://localhost:1234/api` will be proxied to `http://localhost:5001`, so you don't need CORS preflight anymore. Of course you need to adapt these **local** urls to your case.

For more information, you can refer to the Answer and git issue .

Answer 2

After over a week of learning and trying to find the right solution for this problem, I came across a video from one of my favorite YT creators Web Dev Simplified.

Here he elegantly explains the CORS error and provides a simple yet effective solution. Installing the Express and CORS library through NPM within my cloud functions folder and requiring them both in the index.js file. Writing a function that allows you to change the access origin should be enough to solve this error.

const express = require("express");
const app = express();
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

const cors = require('cors');
app.use(
    cors({
        origin: "*",
    })
);

Changing the origin to "*" allows the access request origin to be from any source. You can also change this to a specific URL if you needed.