通过nginx的sub_filter重写CSS和JS中的路径

Question

我遇到了nginx的sub_filter重写规则无法处理CSS文件的问题.我在路径(/site)上提供内容,并且需要JS和CSS中的所有URL都正确地加上前缀.

我在CSS中链接时指定了mime类型.从模板:

<link href="/static/css/site.css" type="text/css" rel="stylesheet" />

nginx启用了子过滤器,我明确指定包括text/css:

location /site {
    access_log /opt/logs/test/nginx-access-site.log combined if=$loggable;
    error_log  /opt/logs/test/nginx-errors-site.log error;

    rewrite ^(/site)$ $1/;
    rewrite ^/site(.+) $1 break;

    sub_filter "test.domain.tld" "test.domain.tld/site";
    sub_filter "'/" "'/site/";
    sub_filter '"/' '"/site/';
    sub_filter "http:" "https:";
    sub_filter_types text/html text/css text/javascript;
    sub_filter_once off;

    include proxy_params;
    proxy_pass http://site_test$1$is_args$args;
    proxy_redirect http://test.domain.tld/ https://test.domain.tld/site/;
}

正确地重写对CSS文件的引用.从HTML输出:

<link href="/site/static/css/site.css" type="text/css" rel="stylesheet" />

问题是它不是在CSS文件中重写,因此图像路径不正确:

.sortable th .asc {
  background-image: url("/static/img/up_arrow.gif");
}

我试过过度宽容而没有任何区别:

    sub_filter_types *;

我误解了使用sub_filter吗？我认为因为CSS是由nginx直接提供的,所以它也会被重写.

Answer 1

经过一番搜索，我找到了解决方案，并浪费了一些时间尝试一些不起作用的方法，所以希望这有助于其他人搜索并找到这篇文章。

显然，默认情况下 sub_filter 仅适用于 text/html。我尝试了各种其他选项来启用 text/javascript text/css 这样的，但没有用：

sub_filter_types text/xml text/css text/javascript;

最终通过过滤所有类型使其工作：

sub_filter_once off;
sub_filter_types *;

记得重启nginx并记得清除浏览器上的缓存。