Nginx反向代理React Router项目无法访问子路径问题求助

问题根源 #

你遇到的两个问题分别来自Nginx配置逻辑冲突和前端资源路径配置错误：

1. 子路径404是因为你的单页应用(SPA)使用前端路由，Nginx没有将未匹配到的路径正确回退到入口index.html
2. 多级子路径下静态资源加载错误是因为前端打包时未配置根路径的publicPath，导致资源请求使用相对路径，自动拼接了当前路由前缀

修复步骤 #

第一步：调整前端打包配置 #

在你前端项目的打包配置(webpack/vite.config.js等)中将publicPath设置为根路径/，示例如下：

• Vite配置：

export default defineConfig({
  base: '/'
})

• Webpack配置：

module.exports = {
  publicPath: '/'
}

重新打包后部署到对应目录。

第二步：调整Nginx配置 #

删除你原有配置中冗余的location ~ ^.+\..+$块，将根location调整为如下逻辑，这里分两种常用场景，注意确认你的应用实际监听端口为4000，不要填错端口号：

场景1：静态资源存放在本地/var/www/domain-app目录，仅前端路由回退和接口请求走4000端口代理

server {
  # gzip
  gzip on;
  gzip_vary on;
  gzip_proxied any;
  gzip_comp_level 6;
  gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;

  # SSL配置，新版本Nginx推荐把ssl参数写在listen行，不需要单独ssl on
  listen 443 ssl;
  listen [::]:443 ssl;
  ssl_certificate /etc/ssl/app.crt;
  ssl_certificate_key /etc/ssl/app.key;

  index index.html;
  server_name app.domain.com;
  proxy_intercept_errors on;
  autoindex off;
  root /var/www/domain-app;

  # 接口请求统一代理到4000端口，根据你实际接口前缀调整，如果没有统一前缀可以省略这个块
  location /api/ {
    proxy_set_header Host $host;
    proxy_pass http://localhost:4000;
    proxy_redirect off;
  }

  location / {
    # 优先匹配本地静态资源，匹配不到的路径回退到index.html交给前端路由处理
    try_files $uri $uri/ /index.html;
  }
}

场景2：所有资源和页面都由4000端口的应用返回

server {
  # gzip
  gzip on;
  gzip_vary on;
  gzip_proxied any;
  gzip_comp_level 6;
  gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;

  listen 443 ssl;
  listen [::]:443 ssl;
  ssl_certificate /etc/ssl/app.crt;
  ssl_certificate_key /etc/ssl/app.key;

  index index.html;
  server_name app.domain.com;
  proxy_intercept_errors on;
  autoindex off;

  location / {
    proxy_set_header Host $host;
    proxy_pass http://localhost:4000;
    proxy_redirect off;
    # 捕获404错误回退到根路径的index.html
    error_page 404 =200 /index.html;
  }
}

第三步：生效配置 #

修改后执行nginx -t检查配置语法是否正确，确认无误后执行nginx -s reload重载配置即可。

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