NGINX中HTML回退页面异常：多级路径下静态资源404

出现这个问题的核心原因是静态资源使用了相对路径：当访问多级路径（如test.site/level-1/non-existent-page）时，浏览器会将当前页面的路径视为/level-1/，因此相对路径的css/file.css会被解析为/level-1/css/file.css，但实际资源存储在根目录的/css/下，导致404错误。

方案一：修改HTML资源引用为绝对路径（推荐） #

直接将所有CSS、JS、图片等静态资源的引用改为以/开头的绝对路径，确保浏览器始终从网站根目录加载资源：

• 原写法：<link rel="stylesheet" href="css/file.css">

• 修改后：<link rel="stylesheet" href="/css/file.css">

• 原写法：<script src="js/file.js"></script>

• 修改后：<script src="/js/file.js"></script>

这种方式从根源解决路径解析问题，适配所有页面路径场景，无需额外配置服务器。

方案二：通过Nginx配置强制静态资源从根目录加载 #

如果无法修改HTML代码，可以在Nginx的server块中添加静态资源专属匹配规则，强制从根目录的对应目录查找资源：

server {
    listen            443 ssl http2;
    listen            [::]:443 ssl http2;
    server_name       test.site;
    set               $base /var/www/test.site;
    root              $base/public;

    # 匹配所有静态资源后缀，强制从根目录加载
    location ~* \.(css|js|png|jpg|jpeg|gif|ico)$ {
        try_files $uri =404;
        expires 1y; # 适配缓存需求，设置长期缓存
    }

    # 保留原有的index.html fallback规则
    location / {
        try_files $uri $uri/ /index.html;
    }
}

也可以针对特定目录单独配置：

# 单独处理CSS目录
location /css/ {
    try_files $uri =404;
    expires 1y;
}

# 单独处理JS目录
location /js/ {
    try_files $uri =404;
    expires 1y;
}

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