如何修复Firebase Cloud Functions新增onRequest函数的CORS错误？

你的新函数trkFun未配置CORS响应头，这是跨域报错的核心原因——浏览器发起跨域请求时，会检查服务器返回的CORS相关头信息，缺失这些头就会触发错误。下面是具体修复方案：

• 配置CORS响应头
  在函数开头添加允许跨域的头信息，开发阶段可以用*允许所有源，生产环境要替换成你的前端实际域名：

  response.set('Access-Control-Allow-Origin', '*');
  response.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  response.set('Access-Control-Allow-Headers', 'Content-Type');
  

• 处理OPTIONS预检请求
  浏览器发送POST这类非简单请求前，会先发送OPTIONS预检请求，需要单独处理并返回204状态：

  if (request.method === 'OPTIONS') {
    response.status(204).send('');
    return;
  }
  

• 完整修复后的代码（含错误处理）
  把上述逻辑整合，同时添加异常捕获，避免因外部API请求失败导致的响应异常：

  import * as functions from "firebase-functions";
  import fetch from "node-fetch";
  
  export const trkFun = functions.https.onRequest(
      async (request, response) => {
        // 设置CORS头
        response.set('Access-Control-Allow-Origin', '*');
        response.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
        response.set('Access-Control-Allow-Headers', 'Content-Type');
  
        // 处理OPTIONS预检请求
        if (request.method === 'OPTIONS') {
          response.status(204).send('');
          return;
        }
  
        try {
          const trackingNumber = request.body.trackingNumber;
          // 替换为你的实际API地址，示例结合trackingNumber构造请求链接
          const endPoint = `https://your-api-domain.com/track?number=${trackingNumber}`;
          const responseBody = await fetch(endPoint);
          const res = await responseBody.json();
          response.send(res.objetos);
        } catch (error) {
          functions.logger.error('请求外部API失败:', error);
          response.status(500).send({ error: '内部服务错误' });
        }
      });
  

• 额外提醒

  • 生产环境务必将Access-Control-Allow-Origin的值替换为你的前端域名，比如https://your-frontend-app.com，不要使用*
  • 确认外部APIendPoint本身可正常访问，无额外访问限制
  • 本地调试可使用firebase emulators:start启动模拟器，查看函数日志排查问题

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