Nginx按不同location反向代理多站点时资源路径缺失如何解决

方案1：使用 Nginx sub_filter 模块改写响应链接 #

这个方案可以直接在Nginx层修改返回页面的所有资源链接，不需要调整后端站点配置，示例配置如下：

server {
    listen       80;
    server_name  localhost;

    location /a/ {
        proxy_pass http://apache.org/;
        # 禁用gzip压缩，否则无法解析替换响应内容
        proxy_set_header Accept-Encoding "";
        # 开启全局替换，不限制仅替换第一个匹配项
        sub_filter_once off;
        # 指定需要替换的响应内容类型
        sub_filter_types text/html text/css application/javascript;
        # 替换所有绝对路径引用，添加前缀
        sub_filter 'href="/' 'href="/a/';
        sub_filter 'src="/' 'src="/a/';
        sub_filter 'url("/' 'url("/a/';
        sub_filter "url('/" "url('/a/";
    }

    location /b/ {
        proxy_pass http://www.gnu.org/;
        proxy_set_header Accept-Encoding "";
        sub_filter_once off;
        sub_filter_types text/html text/css application/javascript;
        sub_filter 'href="/' 'href="/b/';
        sub_filter 'src="/' 'src="/b/';
        sub_filter 'url("/' 'url("/b/';
        sub_filter "url('/" "url('/b/";
    }
}

注意事项 #

• 部分自定义编译的Nginx可能没有内置ngx_http_sub_module模块，需要在编译时添加--with-http_sub_module参数开启
• 如果后端返回的JS中有动态拼接的路径，该方案可能会出现漏替换的情况

方案2：调整后端站点根路径（更推荐） #

直接修改对应站点的配置，将站点的根路径设置为对应前缀，无需Nginx做额外内容改写：

• 静态站点：打包时指定公共资源前缀，比如Vue项目配置publicPath: '/a/'，React项目配置homepage: '/a/'
• 动态站点：在服务端配置站点的根上下文路径，比如Java SpringBoot项目配置server.servlet.context-path=/a，PHP站点配置全局路径前缀
  该方案性能更高，不会出现路径漏替换的问题，长期维护成本更低。

方案3：使用子域名区分站点（最省心） #

如果可以调整域名配置，更推荐用不同子域名区分不同站点，完全不需要处理路径前缀问题，配置示例：

# a站点配置
server {
    listen 80;
    server_name a.localhost;
    location / {
        proxy_pass http://apache.org/;
    }
}
# b站点配置
server {
    listen 80;
    server_name b.localhost;
    location / {
        proxy_pass http://www.gnu.org/;
    }
}

配置完成后只需要在本地hosts文件添加对应子域名的解析即可使用。

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