如何为Vite开发服务器定义自定义Express.js路由并修复res.status报错

Vite 开发服务器的中间件层基于Connect实现，并非完整的Express.js框架，你拿到的res是原生Node.js的HTTP响应对象，没有Express封装的status()、type()、send()这类链式方法，直接调用就会抛出res.status() is not a function错误。

原代码还有两个容易引发异常的问题：

• 已经向客户端返回响应后仍调用next()，会触发后续中间件重复处理请求，大概率出现「响应头已发送」的报错
• Connect的use方法默认是前缀路径匹配，比如/__variables.js/xxx这类路径也会命中当前处理逻辑，不符合单端点的设计预期。

不需要额外引入Express，直接用原生Node.js的响应API即可实现完全一致的功能，把逻辑写在Vite配置的configureServer钩子中：

import { defineConfig } from 'vite'

export default defineConfig({
  // 其余你的原有Vite配置保持不变
  configureServer(server) {
    server.middlewares.use('/__variables.js', (req, res, next) => {
      // 精确匹配路径，避免前缀匹配误命中其他路由
      if (req.url !== '/__variables.js') {
        return next()
      }

      // 提取所有REACT_APP_前缀的环境变量
      const appVariables = Object.keys(process.env).reduce((envMap, key) => {
        if (key.startsWith('REACT_APP_')) {
          envMap[key] = process.env[key]
        }
        return envMap
      }, {})

      // 用原生响应API返回JS内容
      res.statusCode = 200
      res.setHeader('Content-Type', 'application/javascript')
      res.end(`window.__APP_VARIABLES__ = ${JSON.stringify(appVariables)}`)
      // 返回响应后无需调用next()
    })
  }
})

• 上述配置仅在Vite开发环境生效，如果生产环境构建后也需要同路径的端点，需要在你部署用的静态服务（Nginx、Node服务等）上单独配置对应路由
• JSON.stringify会自动对环境变量里的特殊字符做转义，不会生成存在语法错误的JS代码
• 如果确实需要复用复杂的Express路由逻辑，可以手动初始化Express实例，将express实例作为中间件挂载到server.middlewares中，但单端点场景下用原生API无额外依赖、性能更好。

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