通过Firebase Function发起POST请求遇404错误，该如何排查？

问题背景 #

此前配置CORS解决跨域问题后，CORS错误消失，但发起请求时出现404。本地测试一切正常，部署到Web托管平台后触发报错，已确认URL无误。

前端请求代码 #

try {
    const response = await fetch('https://us-central1-nulligpt.cloudfunctions.net/api/hello', {
        method: 'GET',
    });

    if (!response.ok) {
        throw new Error('Network response was not ok.');
    }

    const text = await response.text();
    document.getElementById('response').innerText = text;
} catch (error) {
    console.log('Request failed', error);
}

Firebase Function后端代码 #

const functions = require('firebase-functions');
const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({
  origin: ['https://nulligpt.web.app', 'http://127.0.0.1:5500'],
}));

app.get('/hello', (req, res) => {
  res.status(200).send('Hello World');
});

exports.api = functions.https.onRequest(app);

排查与解决方案 #

1. 确认函数部署状态与路由匹配

• 登录Firebase控制台，进入Functions页面，检查api函数是否处于已部署状态，无部署错误。
• 直接在浏览器访问https://us-central1-nulligpt.cloudfunctions.net/api/hello（GET方法），如果返回404，说明函数部署失败或路由配置存在问题。此时需查看部署日志，确认是否有代码编译或依赖安装错误。

2. 核对请求方法与后端路由的一致性

你提到出现POST请求404，但前端代码使用的是GET方法：

• 如果实际业务需要POST请求，后端需添加对应路由，示例如下：

  app.post('/hello', (req, res) => {
    res.status(200).send('Hello from POST');
  });
  

  添加后重新执行firebase deploy --only functions部署函数。
• 确保前端请求的method参数与后端路由方法（app.get/app.post）完全匹配。

3. 排查冷启动导致的临时404

Firebase Functions存在冷启动机制，刚部署或长时间未调用的函数首次请求可能延迟甚至返回临时404。可通过以下方式验证：

• 多次发起请求，或在Firebase控制台的Functions页面手动触发函数，触发后再测试前端请求。

4. 检查CORS配置与部署域名的一致性

确认前端部署的实际域名已包含在CORS配置的origin数组中。如果前端部署到新域名，需更新CORS配置并重新部署函数。

5. 查看函数日志定位错误

进入Firebase控制台的Functions -> 日志，筛选api函数的请求日志，查看具体错误信息（如路由不匹配、权限问题等），根据日志内容进一步排查。

内容的提问来源于stack exchange，提问作者choi경민