如何为带#的片段URL配置Nginx身份认证？

为什么原配置不生效？ #

URL中的#（片段标识符）是浏览器端专属内容，不会被发送到服务器。也就是说，当用户访问hostname:port/#/foo时，Nginx实际接收到的请求路径只有/，根本看不到#/foo部分，所以你配置的location /%23/foo规则永远不会触发。

可行解决方案 #

方案1：前端主动编码#为%23 #

如果能控制前端代码或页面链接，直接把跳转目标从#/foo改成%23/foo。这样浏览器会把%23/foo作为URL路径的一部分发送给服务器，Nginx就能匹配到location /%23/foo，触发身份认证规则。

方案2：用Nginx JS模块实现客户端重定向 #

如果无法修改前端，可借助Nginx的ngx_http_js_module模块，让浏览器在加载时自动检测URL片段并完成编码重定向：

步骤1：确认Nginx支持JS模块

执行命令nginx -V查看编译参数，确保包含--with-http_js_module。如果没有，需要重新编译Nginx添加该模块。

步骤2：创建处理脚本

新建/etc/nginx/js/handle_hash.js文件，内容如下：

function handleHash(r) {
    // 仅对根路径请求返回处理脚本
    if (r.variables.request_uri === '/') {
        r.return(200, `
            <script>
                // 检测URL片段是否为#/foo
                if (window.location.hash === '#/foo') {
                    // 将#编码为%23后重定向
                    window.location.replace(window.location.origin + '/%23/foo');
                } else {
                    // 其他情况直接跳转到原根路径
                    window.location.replace(window.location.origin + '/');
                }
            </script>
        `);
        r.headersOut['Content-Type'] = 'text/html';
    } else {
        // 非根路径直接放行
        r.next();
    }
}

步骤3：修改Nginx配置

# 引入JS脚本
js_import /etc/nginx/js/handle_hash.js;

server {
    listen <PORT>;
    server_name <HOSTNAME>;

    # 根路径请求交由JS处理
    location = / {
        js_content handleHash;
    }

    # 匹配编码后的路径，触发认证
    location /%23/foo {
        auth_basic           "Administrator’s Area";
        auth_basic_user_file /etc/apache2/.htpasswd;
        
        # 转发前将%23还原为#，保证后端拿到正确路径
        rewrite ^/%23(/foo)$ /#$1 break;
        proxy_pass http://localhost:8000;
        include /etc/nginx/proxy_params;
        proxy_redirect off;
    }

    # 其他路径正常转发
    location / {
        proxy_pass http://localhost:8000;
        include /etc/nginx/proxy_params;
        proxy_redirect off;
    }
}

原理说明

当用户访问hostname:port/时，Nginx返回一段前端JS脚本，浏览器执行后自动检测URL中的#/foo片段，将其编码为%23/foo并重定向。此时服务器能接收到/%23/foo请求，触发身份认证；认证通过后，Nginx将路径重写回/#/foo再转发给后端，确保后端服务能正常处理。

方案3：前端路由层面做认证（单页应用场景） #

如果你的应用是Vue、React这类单页应用，直接在前端路由中对/foo路径添加权限校验逻辑即可。比如判断用户是否已登录，未登录则跳转到登录页，这种方式无需服务器端介入，实现更简单。

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