React仪表板服务经NGINX反向代理后无法加载问题排查

问题背景 #

部署了Nginx服务器、Node.js后端，以及两个React应用：

• 一个前端应用打包为静态文件由Nginx直接托管（根路径/）
• 另一个运行在8080端口的第三方仪表板服务，计划通过Nginx反向代理/explorer/访问，但无法加载，控制台报错：

Uncaught SyntaxError: Unexpected token '<'

当前Nginx配置服务器块：

server {
        listen       80;
        listen       [::]:80;
        server_name  task-manager.eastus.cloudapp.azure.com;
        return 301 https://$host$request_uri;
    }

    server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name  task-manager.eastus.cloudapp.azure.com;

        location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        }

        # certs sent to the client in SERVER HELLO are concatenated in ssl_certificate
        ssl_certificate /etc/letsencrypt/live/task-manager.eastus.cloudapp.azure.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/task-manager.eastus.cloudapp.azure.com/privkey.pem;
   
        ## node js server running on port 4000

        location /api/ {
          
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass "http://localhost:4000/";
        }

        ##second react app running on port 8080

        location /explorer/{
           proxy_pass "http://localhost:8080/";
        }
  
        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        } 
    }

错误原因 #

这个报错的核心逻辑：

• 8080端口的React仪表板应用，其静态资源（JS、CSS等）的请求路径是绝对根路径（比如/static/js/main.xxx.js）
• 当用户访问/explorer/时，浏览器会向/static/js/...发起资源请求，而Nginx的根路径/配置指向了第一个React应用的静态文件，导致返回的是第一个应用的index.html内容（开头的<符号被JS解析器识别为非法字符，从而触发报错）
• 当前/explorer/的代理配置缺少必要请求头，可能导致后端服务无法正确处理路径匹配。

解决方案 #

1. 更新Nginx代理配置 #

修改服务器块中的/explorer/配置，补充必要代理头，并新增静态资源的代理规则：

##second react app running on port 8080
location /explorer/ {
    proxy_pass http://localhost:8080/;
    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;
    proxy_redirect off;
}

# 代理仪表板的静态资源请求，避免被根路径的配置拦截
location ~ ^/static/(.*)$ {
    proxy_pass http://localhost:8080/static/$1;
    proxy_set_header Host $host;
}

2. 调整React应用的publicPath（若可修改） #

如果该仪表板是可编辑的React应用，打包时需设置正确的资源路径前缀：

• 对于Create React App，在package.json中添加：

  "homepage": "/explorer/"
  

• 或在webpack配置文件中设置：

  module.exports = {
    output: {
      publicPath: '/explorer/'
    }
  };
  

修改后重新打包并部署到8080端口服务。

3. 重启Nginx生效 #

执行命令验证配置并重启服务：

sudo nginx -t  # 检查配置语法合法性
sudo systemctl restart nginx

验证 #

访问https://task-manager.eastus.cloudapp.azure.com/explorer/，查看控制台是否还有报错，同时在浏览器Network标签下确认静态资源的请求路径和响应内容是否正常。

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