使用Firebase模拟器与Vite时出现Callable Cloud Function CORS错误

客户端调用代码 #

// 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;
  })
});

云函数代码 #

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初始化配置代码 #

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 };

错误信息 #

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.

问题解答 #

1. 问题根源

• 初始化代码中getFunctions(getApp(), app)参数错误，正确用法应为getFunctions(app)或仅传单个app实例，这个错误导致Functions实例初始化异常，没有正确连接到本地模拟器，反而尝试调用生产环境端点，触发跨域限制。
• 云函数存在逻辑错误：判断条件用了data.text.length，但客户端传递的是description，会引发未定义错误，但这不是当前CORS错误的直接原因。

2. 是否需要配置Firebase Admin来授予访问权限？

不需要。https.onCall类型的云函数，Firebase会自动处理CORS配置，无需手动在Admin中设置权限。当前问题是客户端Functions实例初始化错误导致的，修复初始化代码即可。

3. 在浏览器中关闭CORS，会给生产环境带来安全风险吗？

会。关闭浏览器CORS限制只是本地开发的临时 workaround，绝对不能用于生产环境。生产环境关闭CORS会让浏览器失去跨域请求的安全校验，恶意网站可冒充你的站点向云函数发送请求，窃取用户数据或执行未授权操作，严重威胁应用和用户安全。

内容的提问来源于stack exchange，提问作者HarryNC