部署express托管的React应用时出现Internal server error 403如何解决

问题原因 #

• 路径分隔符硬编码错误：你在路径拼接时写死了Windows系统的反斜杠\\，线上一般为Linux/Unix系统，路径分隔符为/，错误的路径会导致sendFile定位到不存在/无权限访问的路径，触发403。
• sendFile安全校验拦截：没有显式指定静态资源根目录时，express会校验文件路径是否存在路径遍历风险，不符合规则会直接返回403。
• 线上文件权限不足：express运行进程的系统用户没有reactapp/build目录及内部index.html的读权限，会触发权限拒绝返回403。
• 相对路径偏差：线上运行时的工作目录和本地不一致，用相对路径拼接会导致定位的文件路径错误，触发访问限制。

解决方案 #

1. 修正路径拼接和sendFile写法，移除硬编码的分隔符，显式指定资源根目录：

const path = require('path')
// 先修正静态资源托管的路径写法，用path.join自动适配系统分隔符
app.use('/', express.static(path.join(__dirname, '../reactapp/build')))

// 兜底路由修改为如下写法
app.use((req, res) => {
  // 显式指定root参数，避免路径遍历校验拦截
  res.sendFile('index.html', {
    root: path.join(__dirname, '../reactapp/build')
  }, (err) => {
    if (err) {
      // 出错时可打印日志排查具体原因
      console.error('返回index.html失败:', err)
      res.status(500).send('服务器内部错误')
    }
  })
})

2. 修正线上文件权限：执行如下命令调整build目录权限，确保express运行用户可读取：

# 给build目录设置读和执行权限（执行权限是进入目录必须的）
chmod 755 ./reactapp/build
# 给build目录下所有文件设置读权限
chmod 644 ./reactapp/build/*

3. 确认express进程运行用户权限，不要用root用户运行node进程，也不要使用无对应目录访问权限的用户运行，可选择www-data或专门的node服务用户运行进程。

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