Nginx无法加载静态JS/CSS文件，返回404错误求排查方案

问题背景 #

静态文件目录结构：

/var/www/myroot/
                environment.js
                css/
                    vendor.css
                    main.css
                js/
                    main.js
                    vendor.js
                    app.js

后端返回的HTML中，静态资源引用带缓存用查询参数（如/js/vendors.js?v=9b77），但Nginx对所有.js/.css等静态资源返回404。当前Nginx核心配置如下：

server { 
    # listen 443, certs etc.
    server_name my-domain.de;
    root /var/www/myroot/;
    
    location ~ ^\/$ {
        proxy_pass         http://127.0.0.1:5002;
        ... more proxy statements
    }   
    
    # 静态资源匹配块未正常工作
    location ~* \.(gif|ico|jpg|png|svg|js|css|mp3|mp4|wav|ogg|avi|ttf|eot|woff|woff2)(\?.*|)$ {
        try_files $uri =404;
    }
    
    # 兜底路由，将非匹配路径导向根目录
    location / {
        try_files $uri /;
    }
}

排查步骤 #

• 核对文件名拼写与大小写：
  注意到HTML引用的是vendors.js/vendors.css，但实际目录中是vendor.js/vendor.css（少了末尾的s），这是最常见的低级错误，先确认文件名完全一致。
• 调试URI变量实际值：
  Nginx的$uri变量不包含查询字符串，请求/js/vendors.js?v=9b77时，$uri的值是/js/vendors.js。可临时添加调试日志验证：

  location ~* \.(js|css|png|svg)$ {
      access_log /var/log/nginx/static_debug.log "$uri | $request_uri";
      try_files $uri =404;
  }
  

  查看日志确认$uri是否正确指向预期的文件路径。
• 检查文件权限：
  确保Nginx运行用户（通常为www-data）对/var/www/myroot/及其子目录、文件拥有读取权限。执行命令验证：

  ls -l /var/www/myroot/js/
  ls -l /var/www/myroot/css/
  

  确认文件的所有者/组权限包含Nginx用户的读权限。
• 验证location匹配优先级：
  正则表达式location优先级高于前缀location，但可临时注释最后一个location /块，测试静态资源是否能正常访问，排除兜底路由的干扰。
• 优化try_files匹配逻辑：
  可显式使用$uri_without_args变量（自动去除查询参数）进行匹配，确保指向真实文件：

  try_files $uri_without_args =404;
  

• 确认root路径生效：
  虽然全局已设置root，但可在静态资源location块中重复声明root /var/www/myroot/;，避免局部上下文的路径覆盖问题。

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