如何配置Nginx 404页面不影响同前缀带哈希标识的其他路径

问题原因 #

你遇到的问题本质是URL哈希片段的固有特性导致的：

• URL中#以及之后的内容属于哈希标识（锚点），这部分内容仅由浏览器端处理，不会随HTTP请求发送到Nginx服务端
• 因此所有路径为/frontend/#/xxx的请求，实际发到Nginx的请求路径都是/frontend/，你配置的location = /frontend/精确匹配规则自然会命中所有这类请求，才会出现连带跳转404的问题。

Nginx本身无法获取到URL的哈希部分，所以无法单独通过Nginx配置实现「仅拦截/frontend/#/、不拦截其他带哈希后缀路径」的需求。

修复方案 #

需要配合前端代码实现对应逻辑：

1. 先调整Nginx配置，取消原来的location = /frontend/返回404的规则，改为正常返回/frontend目录下的前端入口页面：

server{
    listen 80;
    server_name example.com;
    
    error_page 404 /404.html;
    
    location = /404.html {
        root /opt/app/nginx/html;
        internal;
    }
    
    # 替换原来的精确匹配404规则，正常返回前端入口
    location /frontend/ {
        root /opt/app/nginx/html; # 替换为你实际的前端文件存放目录
        index index.html index.htm;
        try_files $uri $uri/ /frontend/index.html;
    }
}

2. 在/frontend目录对应的前端入口页面（通常是index.html）中添加哈希判断逻辑：
   • 页面加载时读取window.location.hash值，如果值为#/或者空哈希，就手动渲染404内容或者跳转到站点统一404页面
   • 其余哈希值的情况正常加载对应路由内容即可。

内容的提问来源于stack exchange，提问作者Anchiao C.