Nginx反向代理后CSS/JS资源404问题及配置优化求助

你的问题核心在于：页面中的CSS/JS资源使用了根路径（/css/、/js/）发起请求，Nginx收到这些请求后，会按照location /的配置去本地/var/www/example.com目录查找资源，但这些资源实际存储在NodeJS服务（3000端口）的根路径下，因此返回404错误。

以下是两种可行的解决方案：

方案一：代理指定静态资源路径到NodeJS服务 #

直接在Nginx配置中添加对应静态资源路径的代理规则，将/css/、/js/开头的请求转发到NodeJS服务：

server {
  
  root /var/www/example.com;
  index index.html;
  server_name example.com www.example.com;
  
  location / {
    try_files $uri $uri/ =404;
  }
  
  # 代理/control/路径到NodeJS服务，末尾斜杠会去掉/control/前缀转发
  location /control/ {
    proxy_pass http://127.0.0.1:3000/;
  }
  
  # 代理CSS资源请求到NodeJS服务
  location /css/ {
    proxy_pass http://127.0.0.1:3000/css/;
  }
  
  # 代理JS资源请求到NodeJS服务
  location /js/ {
    proxy_pass http://127.0.0.1:3000/js/;
  }
}

方案二：统一路径前缀（需调整NodeJS服务配置） #

如果你的NodeJS服务支持配置资源路径前缀（比如将所有静态资源的路径前缀设为/control/），生成的资源请求会变成/control/css/...、/control/js/...，此时只需调整proxy_pass的配置即可：

server {
  
  root /var/www/example.com;
  index index.html;
  server_name example.com www.example.com;
  
  location / {
    try_files $uri $uri/ =404;
  }
  
  # 所有/control/开头的请求都会转发到NodeJS服务的根路径
  location /control/ {
    proxy_pass http://127.0.0.1:3000/;
  }
}

注意：proxy_pass末尾的斜杠是关键——如果省略斜杠，Nginx会将/control/xxx转发到http://127.0.0.1:3000/control/xxx，而你的NodeJS服务中不存在这个路径，因此必须添加斜杠来移除/control/前缀。

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