添加CORS中间件后Firebase Cloud Function仍报CORS错误

问题描述 #

我在Firebase云函数中引入了cors中间件并配置{origin: true}，但前端调用时仍收到Access has been blocked by CORS policy错误。想确认当前的CORS启用方式是否正确。

云函数代码 #

const cors = require('cors');
const corsHandler = cors({ origin: true });

// List all surveys
exports.getSurveys = functions
  .runWith({ secrets: ['TOKEN'] })
  .https.onRequest((req, res) => {
    corsHandler(req, res, () => {
      // request options
      const options = {
        method: 'GET',
        url: 'https://xx1.website.com/API/v3/surveys',
        headers: {
          'Content-Type': 'application/json',
          'X-API-TOKEN': process.env.TOKEN,
        },
      };

      axios
        .request(options)
        .then(response => {
          res.send(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    });
  });

前端React调用代码 #

useEffect(() => {
  const getSurveys = async () => {
    const res = await axios.get(
      'https://us-central1-<project-id>.cloudfunctions.net/getSurveys'
    );

    console.log(res);
  };

  getSurveys();
}, []);

问题排查与解决 #

你的CORS配置写法本身是正确的，但有几个容易忽略的点会导致看似CORS的错误：

• 错误处理未返回响应：当前catch块仅打印错误，未给前端返回任何状态码和信息。当第三方API请求失败时，云函数会无响应或超时，浏览器会将这种情况判定为CORS错误。修改catch逻辑：

  .catch(error => {
    console.log(error);
    res.status(error.response?.status || 500).send(error.message || '请求处理失败');
  });
  

• 缺失axios依赖引入：代码中使用了axios但未添加引入语句，云函数会因axios未定义报错，导致无合法响应触发CORS提示。需在代码顶部添加：

  const axios = require('axios');
  

• 确认云函数部署与状态：

  • 确保修改后的代码已重新部署：执行firebase deploy --only functions:getSurveys
  • 查看Firebase控制台的函数日志，确认第三方API请求是否成功、环境变量TOKEN是否正确加载

• 清除浏览器缓存：浏览器可能缓存了旧的CORS响应，尝试用隐身模式或清空缓存后测试

• 本地测试注意事项：本地调试时需启动Firebase模拟器，前端调用本地函数地址（如http://localhost:5001/<project-id>/us-central1/getSurveys），避免跨域问题

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