Nginx配置问题：多React应用单端口路径代理后页面仅显示部分标签

问题根源 #

出现仅显示<title>等基础标签的情况，核心原因是：

• React应用默认以根路径/作为静态资源和路由的基准，部署在子路径下时，浏览器会去根路径加载静态资源（如js、css），导致资源404
• Nginx未正确重写请求路径，后端React应用收到带前缀的请求后无法匹配资源

解决方案 #

1. 调整Nginx配置 #

修改Nginx的server块，添加路径重写、请求头传递以及SPA路由处理：

server {
    listen 8080;
    server_name localhost;

    # 代理examcontrol到4040端口
    location /examcontrol {
        # 重写路径，移除前缀后转发至后端
        rewrite ^/examcontrol(.*)$ $1 break;
        proxy_pass http://localhost:4040;
        # 传递必要请求头，保证后端应用获取正确的请求信息
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        # 处理SPA路由，访问子路由时返回index.html
        try_files $uri $uri/ /index.html;
    }

    # 代理student到4141端口
    location /student {
        rewrite ^/student(.*)$ $1 break;
        proxy_pass http://localhost:4141;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        try_files $uri $uri/ /index.html;
    }

    # 代理staff到4242端口
    location /staff {
        rewrite ^/staff(.*)$ $1 break;
        proxy_pass http://localhost:4242;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        try_files $uri $uri/ /index.html;
    }
}

2. 适配React应用配置 #

每个React项目都需要调整以下配置：

• 设置homepage字段：在package.json中添加对应子路径，让打包后的静态资源路径带上前缀

  // examcontrol项目
  "homepage": "/examcontrol"
  // student项目
  "homepage": "/student"
  // staff项目
  "homepage": "/staff"
  

• 配置React Router的basename（若使用路由）：如果项目用了React Router，给路由组件添加basename属性，确保路由跳转时带上子路径前缀

  import { BrowserRouter } from 'react-router-dom';
  
  ReactDOM.render(
    <BrowserRouter basename="/examcontrol">
      <App />
    </BrowserRouter>,
    document.getElementById('root')
  );
  

• 重新打包：执行npm run build生成适配子路径的静态文件，之后重启Nginx服务。

内容的提问来源于stack exchange，提问作者amal m reji