如何为ReactJS应用打造返回JSON格式的健康检查页面？

核心问题：React客户端组件运行在浏览器端，无论返回什么内容都会被包裹在HTML文档中，因此无法直接修改HTTP响应头。要实现返回application/json类型的健康检查响应，必须通过服务端路由处理该请求。

以下是针对不同React项目架构的具体实现方案：

方案1：Next.js项目（推荐，自带服务端路由） #

如果你的项目基于Next.js，直接使用其API路由功能即可：

Pages Router 写法 #

在pages/api/health.js中创建服务端路由：

export default function handler(req, res) {
  const healthData = {
    status: 200,
    environment: process.env.NODE_ENV
  };
  res.setHeader('Content-Type', 'application/json');
  res.status(200).json(healthData);
}

App Router 写法 #

在app/api/health/route.js中创建路由：

export async function GET() {
  const healthData = {
    status: 200,
    environment: process.env.NODE_ENV
  };
  return new Response(JSON.stringify(healthData), {
    status: 200,
    headers: {
      'Content-Type': 'application/json'
    }
  });
}

访问/api/health即可得到符合要求的JSON响应。如果需要在页面展示该JSON，客户端组件可以直接硬编码数据（避免额外请求，提升加载速度）：

const HealthCheck = () => {
  const healthData = {
    status: 200,
    environment: process.env.NODE_ENV
  };
  return <pre>{JSON.stringify(healthData, null, 2)}</pre>;
};

export default HealthCheck;

方案2：Create React App + 自定义Express服务器 #

如果使用Create React App，需要自定义Express服务器来添加健康检查路由：

1. 安装依赖：

npm install express concurrently --save

2. 在项目根目录创建server.js：

const express = require('express');
const path = require('path');
const app = express();

// 健康检查路由
app.get('/health', (req, res) => {
  const healthData = {
    status: 200,
    environment: process.env.NODE_ENV
  };
  res.setHeader('Content-Type', 'application/json');
  res.status(200).json(healthData);
});

// 生产环境静态文件服务
if (process.env.NODE_ENV === 'production') {
  app.use(express.static(path.join(__dirname, 'build')));
  app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
  });
}

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

3. 修改package.json的启动脚本：

"scripts": {
  "start": "node server.js",
  "dev": "concurrently \"node server.js\" \"react-scripts start\"",
  "build": "react-scripts build",
  "test": "react-scripts test"
}

启动项目后，访问/health即可得到JSON响应，客户端展示组件同方案1。

方案3：Create React App开发环境临时配置（仅用于开发） #

如果不想自定义服务器，可通过react-app-rewired修改开发服务器配置：

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 创建config-overrides.js：

const { override, devServer } = require('customize-cra');

module.exports = override(
  devServer(configFunction) {
    return function (proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      // 添加健康检查路由
      config.before = (app) => {
        app.get('/health', (req, res) => {
          const healthData = {
            status: 200,
            environment: process.env.NODE_ENV
          };
          res.setHeader('Content-Type', 'application/json');
          res.status(200).json(healthData);
        });
      };
      return config;
    };
  }
);

3. 修改package.json脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

此方案仅适用于开发环境，生产环境仍需使用方案2或部署时配置服务器（如Nginx）添加健康检查路由。

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