客户端使用fetch调用Firebase Cloud Function返回404如何解决

错误原因及修复方案 #

1. firebase.json重写规则配置错误

你当前的rewrites配置存在两处核心错误：

• 你导出的云函数名称为payment，但配置中写的函数名是create-payment-intent，后者是你Express应用内的路由路径，并非云函数的导出名称
• 同一条重写规则中不能同时配置function和destination参数，二者互斥，会导致Firebase不知道该把请求转发到云函数还是返回静态index.html

修正后的重写规则如下：

{
  "hosting": {
    "rewrites": [
      {
        "source": "payment_app/**",
        "function": "payment"
      }
    ]
  }
}

2. Express路由与请求路径不匹配

Firebase Hosting将请求转发给云函数时，会把完整的请求路径传给Express应用。你当前请求的路径是/payment_app/create-payment-intent，但Express只监听了/create-payment-intent路由，自然匹配不到返回404。
修复方式二选一：

• 调整Express路由，匹配带前缀的路径：

payment_app.post("/payment_app/create-payment-intent", async (req, res) => {
  // 原有逻辑保持不变
})

• 或者给Express应用设置全局前缀：

const payment_app = express();
payment_app.use('/payment_app', express.json()); // 前缀统一设置
// 原有路由保持不变
payment_app.post("/create-payment-intent", async (req, res) => {...})

3. 额外逻辑问题

你云函数返回的字段是clientSecret，但客户端成功回调里解构的是url，后续接口通了之后需要调整这里的字段匹配，否则会拿到undefined报错。

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