如何将Firebase onRequest函数转为onCall？本地模拟器调用报错

问题背景 #

本地使用Firebase模拟器，尝试将现有onRequest HTTP函数转换为onCall函数，编写简易onCall函数后调用时报错：

{"error":{"message":"Bad Request","status":"INVALID_ARGUMENT"}}

原onRequest函数代码：

export const getFileInformation = functions.https.onRequest( (req, res) => { 
  return cors( req, res, () => { 
    const urls = [ `url1`, `url2`, `url3` ]; 
    const urlsCalls: any[] = []; 
    const resultados: any[] = []; 
    urls.forEach( url => { 
      urlsCalls.push(axios.get(url)); 
    }); 
    Promise.allSettled(urlsCalls) 
      .then( response => { 
        response.map( (element: any) => { 
          const item = element.value.data; 
          resultados.push(item); 
        }); 
        console.log(resultados); 
        res.json(resultados); 
      }) 
      .catch( error => { 
        console.log(error); 
      }); 
  }); 
});

尝试的简易onCall函数：

export const getFileInformation2 = functions.https.onCall( (data, context) => { 
  return { msg: 'Hello from Firebase!' }; 
});

正确实现onCall函数 #

1. 迁移原有业务逻辑到onCall #

onCall函数无需手动处理CORS（Firebase自动封装），直接返回Promise或可序列化数据即可。迁移后的代码示例：

import * as functions from "firebase-functions";
import axios from "axios";

export const getFileInformation = functions.https.onCall(async (data, context) => {
  // 可选：身份验证（若需限制登录用户调用）
  if (!context.auth) {
    throw new functions.https.HttpsError('unauthenticated', '用户未登录');
  }

  const urls = [ `url1`, `url2`, `url3` ];
  const urlsCalls = urls.map(url => axios.get(url));
  const responses = await Promise.allSettled(urlsCalls);
  
  // 过滤成功请求，提取数据
  const resultados = responses
    .filter(result => result.status === 'fulfilled')
    .map(result => (result as PromiseFulfilledResult<any>).value.data);

  return resultados;
});

关键注意点：

• 使用async/await简化异步逻辑，替代Promise链式调用
• 必须抛出functions.https.HttpsError类型错误，前端才能正确捕获并处理
• 无需手动引入CORS中间件，Firebase自动处理跨域

2. 前端正确调用onCall函数 #

onCall函数不能用普通HTTP请求（如fetch/axios直接请求URL），必须使用Firebase客户端SDK的httpsCallable方法：

Web端示例（JavaScript/TypeScript）

import { getFunctions, httpsCallable, connectFunctionsEmulator } from "firebase/functions";
import { initializeApp } from "firebase/app";

// 初始化Firebase应用（本地模拟器可使用默认配置）
const firebaseConfig = { /* 你的Firebase配置 */ };
const app = initializeApp(firebaseConfig);

// 连接本地模拟器（本地开发必须配置）
const functions = getFunctions(app);
connectFunctionsEmulator(functions, "localhost", 5001);

// 创建函数调用实例
const getFileInformation = httpsCallable(functions, 'getFileInformation');

// 发起调用（可传递参数，如动态urls）
getFileInformation()
  .then((result) => {
    const data = result.data;
    console.log('返回数据：', data);
  })
  .catch((error) => {
    console.error('调用失败：', error.code, error.message);
  });

移动端示例（如React Native）

逻辑与Web端一致，使用对应平台的Firebase SDK调用httpsCallable方法即可。

"Bad Request/INVALID_ARGUMENT"错误排查 #

• 调用方式错误：用普通HTTP请求直接访问onCall函数URL，必须使用Firebase SDK的httpsCallable方法
• 参数序列化问题：前端传递的参数必须是JSON可序列化对象，不能传递函数、Blob等无法序列化的类型
• 模拟器配置缺失：本地开发未配置连接到模拟器，导致请求发送至线上环境
• 返回值序列化问题：onCall函数返回值必须是JSON可序列化的，异步逻辑需用async/await处理后返回

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