Firebase项目中搭建API站点实现JSON数据显示的问题

Firebase Hosting默认是静态托管服务，要让API直接在浏览器页面返回JSON数据，你需要结合Cloud Functions来处理动态请求——毕竟静态页面没法生成动态响应内容。下面是具体实现步骤：

1. 初始化Cloud Functions（未初始化的话） #

在项目根目录打开终端，执行：

firebase init functions

按提示选择Node.js环境，完成初始化流程。

2. 编写返回JSON的函数 #

打开functions/index.js，替换为以下代码（两种方式选其一即可）：

方式一：用Express框架（适合多路由的API） #

const functions = require("firebase-functions");
const express = require("express");
const app = express();

// 定义API路由，返回自定义JSON
app.get("/api/data", (req, res) => {
  // 替换成你实际要返回的数据
  const responseData = {
    code: 200,
    msg: "请求成功",
    data: {
      username: "test",
      userId: 123
    }
  };
  // 设置响应头为JSON格式，直接发送数据
  res.setHeader("Content-Type", "application/json");
  res.json(responseData);
});

// 将Express实例部署为Cloud Function
exports.api = functions.https.onRequest(app);

方式二：简单单路由函数（适合单个API接口） #

const functions = require("firebase-functions");

exports.simpleApi = functions.https.onRequest((req, res) => {
  const data = { status: "success", result: "Hello from Firebase API" };
  res.setHeader("Content-Type", "application/json");
  res.send(JSON.stringify(data));
});

3. 配置Hosting重写规则 #

打开firebase.json，在hosting节点下添加rewrites规则，把API请求转发到对应的Cloud Function：

{
  "hosting": {
    "public": "public",
    "rewrites": [
      // 对应Express方式的路由
      {
        "source": "/api/**",
        "function": "api"
      },
      // 对应简单函数的路由
      {
        "source": "/simple-api",
        "function": "simpleApi"
      }
    ]
  }
}

4. 部署并验证 #

在终端执行部署命令：

firebase deploy --only functions,hosting

部署完成后，访问你的Firebase Hosting域名加上对应路由（比如https://你的项目ID.web.app/api/data），就能直接在浏览器页面看到格式化的JSON数据了。

额外小技巧 #

• 如果只是返回固定JSON数据，也可以直接把.json文件放到public目录下，访问https://你的项目ID.web.app/xxx.json就能直接显示，但这种方式只能返回静态数据，无法动态生成。
• 本地测试可以用firebase serve命令，先在本地验证效果再部署到线上。

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