Nginx反向代理Web应用时绝对路径资源访问异常解决方案咨询

这个问题我之前部署应用时也踩过坑！绝对路径资源直接跳根路径是反向代理子场景里的典型问题，核心原因是你的Web应用并不知道自己是在/my-app这个子路径下运行的，所以它输出的绝对路径（以/开头）都是基于根域名的，自然不会带上/my-app前缀。这里有几个实用的解决办法，你可以按需选择：

方法一：用Nginx的sub_filter修改响应内容（快速适配） #

这个办法不需要改动应用代码，直接通过Nginx把响应里的绝对路径替换成带前缀的路径。首先确保你的Nginx编译了ngx_http_sub_module模块（主流Linux发行版的默认包一般都包含），然后修改你的location配置：

location /my-app/ {
    proxy_pass http://127.0.0.1:3012/;
    # 替换socket.io的绝对路径
    sub_filter '/socket.io/' '/my-app/socket.io/';
    # 如果还有其他绝对路径资源，比如/css/、/api/，可以继续添加sub_filter规则
    # sub_filter '/css/' '/my-app/css/';
    # 确保所有匹配的内容都被替换，不止第一个匹配项
    sub_filter_once off;
    # 可选：指定需要处理的MIME类型，默认只处理text/html
    sub_filter_types text/html text/javascript text/css;
}

如果你的应用启用了Gzip压缩，可能需要先关闭对应资源的压缩，或者配置Nginx先解压再执行替换，否则sub_filter可能无法匹配到压缩后的内容。

方法二：修改Web应用的基础路径（最彻底） #

如果你的Web应用支持配置基础路径，这是最靠谱的解决方案——从源头让应用输出的所有路径都带上/my-app前缀。不同框架的配置方式略有不同：

• Vue.js可以在vue.config.js里设置publicPath: '/my-app/'
• React可以在package.json里设置homepage: '/my-app/'
• 原生HTML应用可以在头部添加<base href="/my-app/" />，这样所有相对路径都会基于这个基准地址，绝对路径也可以调整为相对基准的路径

修改后应用会自动输出/my-app/socket.io/socket.io.js这类路径，不需要Nginx做额外处理。

方法三：为单个绝对路径添加独立的location（适合少量路径） #

如果你的应用只有少数几个绝对路径资源（比如只有socket.io这一个），可以直接在server块里为这些路径单独配置反向代理：

location /my-app/ {
    proxy_pass http://127.0.0.1:3012/;
}

# 单独处理socket.io的绝对路径请求
location /socket.io/ {
    proxy_pass http://127.0.0.1:3012/socket.io/;
}

这个办法的缺点是如果有很多不同的绝对路径，你需要逐个添加location块，维护起来比较麻烦，适合简单场景。

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