VersionResourceResolver 破坏 CSS 相对 URL

Question

我在 Spring Boot 1.2.2 中使用 VersionResourceResolver 进行缓存清除。不幸的是，它认为操纵 CSS 文件中指定的 URI 很聪明。

以 Twitters Bootstrap 为例。它会在 CSS 文件所在目录上方的目录中查找字体。

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

如果没有 VersionResourceResolver，它会像预期的那样工作：

GET http://example.com/res/css/bootstrap.min.css
GET http://example.com/res/fonts/glyphicons-halflings-regular.woff

现在我添加 VersionResourceResolver：

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/res/**")
            .addResourceLocations("/resources/")
            .setCachePeriod(CACHE_SECONDS)
            .resourceChain(true)
                .addResolver(new VersionResourceResolver()                      
                .addFixedVersionStrategy(buildVersion, "/**/"))
                .addResolver(new PathResourceResolver());       
}

现在发生了：

GET http://example.com/res/085a8/css/bootstrap.min.css
GET http://example.com/res/085a8/css/fonts/glyphicons-halflings-regular.woff

那么，为什么会这样呢？因为有人篡改了 CSS 文件中的 URI：

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('085a8/../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('085a8/../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('085a8/../fonts/glyphicons-halflings-regular.woff') format('woff'), url('085a8/../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Bootstrap 只是一个例子。这发生在 CSS 资源中指定的几乎所有（奇怪的是不是所有的）URI 上。使用 Spring 的 CssLinkResourceTransformer 没有帮助。那么，我如何告诉 Spring 不要操作 CSS 文件呢？

编辑：我发现，Spring 调用了 CssLinkResourceTransformer。但我没有在任何地方指定。可能 Spring Boot 会在某个地方自动配置它。

03-05 16:12:47.711 TRACE 11064 --- [nio-8080-exec-2] o.s.w.s.r.CssLinkResourceTransformer     : Transforming resource: ServletContext resource [/resources/css/bootstrap.min.css]
2015-03-05 16:12:47.716 TRACE 11064 --- [nio-8080-exec-2] o.s.w.s.r.CssLinkResourceTransformer     : Link modified: 77a6e2aa77283c05d58f4ab52102f55684b6fb04/../fonts/glyphicons-halflings-regular.eot (original: ../fonts/glyphicons-halflings-regular.eot)
2015-03-05 16:12:47.716 TRACE 11064 --- [nio-8080-exec-2] o.s.w.s.r.CssLinkResourceTransformer     : Link not modified: ../fonts/glyphicons-halflings-regular.eot?#iefix
2015-03-05 16:12:47.717 TRACE 11064 --- [nio-8080-exec-2] o.s.w.s.r.CssLinkResourceTransformer     : Link modified: 77a6e2aa77283c05d58f4ab52102f55684b6fb04/../fonts/glyphicons-halflings-regular.woff2 (original: ../fonts/glyphicons-halflings-regular.woff2)
2015-03-05 16:12:47.718 TRACE 11064 --- [nio-8080-exec-2] o.s.w.s.r.CssLinkResourceTransformer     : Link modified: 77a6e2aa77283c05d58f4ab52102f55684b6fb04/../fonts/glyphicons-halflings-regular.woff (original: ../fonts/glyphicons-halflings-regular.woff)
2015-03-05 16:12:47.719 TRACE 11064 --- [nio-8080-exec-2] o.s.w.s.r.CssLinkResourceTransformer     : Link modified: 77a6e2aa77283c05d58f4ab52102f55684b6fb04/../fonts/glyphicons-halflings-regular.ttf (original: ../fonts/glyphicons-halflings-regular.ttf)
2015-03-05 16:12:47.719 TRACE 11064 --- [nio-8080-exec-2] o.s.w.s.r.CssLinkResourceTransformer     : Link not modified: ../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular

Edit2：如果你注册了 RessourceChain -.-，Spring 会自动创建一个 CssLinkResourceTransformer。见https://github.com/spring-projects/spring-framework/blob/master/spring-webmvc/src/main/java/org/springframework/web/servlet/config/annotation/ResourceChainRegistration.java#L112

Answer 1

Spring 4.1+ 中的资源处理

您使用的 VersionStrategy FixedVersionStrategy 是为处理文件名以加载 JavaScript 模块的 JavaScript 模块加载器量身定制的。

由于您使用的是 JavaScript 模块加载器 (require.js)，因此对 CSS/图像使用 ContentVersionStrategy 并为 JS 使用 FixedVersionStrategy 更适合您的应用程序。因此，将您的配置更改为此应该可以解决它：

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {

    VersionResourceResolver versionResolver = new VersionResourceResolver()
            .addFixedVersionStrategy(version, "/**/*.js")
            .addContentVersionStrategy(version, "/**/*.css", "/**/*.png");

    registry.addResourceHandler("/res/**")
            .addResourceLocations("/resources/")
            .setCachePeriod(CACHE_SECONDS)
            .resourceChain(true)
                .addResolver(versionResolver);
}

请注意，您不需要注册 PathResourceResolver 或 CssLinkResourceTransformer，因为它是通过检查您的配置为您完成的（您已经通过阅读源代码了解了这一点）。

现在，为了更好地了解该功能，我建议您阅读this blog post 并查看this example application。

SPR-12669 JIRA 问题

实际上，此问题与您的用例无关，本身也不是错误。 Guillaume 创建了WUIC project，我们正在讨论如何更好地将这个资产管道集成到 Spring 项目中。因此，作为一名框架开发人员，他正在为 WUIC 用户寻找更多的灵活性——资源处理功能本身可以正常工作。

您所描述的解决方法并非旨在用于应用程序，因为您没有充分理由手动进行大量管道检查，而不是依赖 Spring 的默认设置。

另外，请注意，我们在这里讨论的默认值是由 Spring Framework 设置的，而不是由 Spring Boot 设置的。 Spring Boot 是“唯一的”autoconfiguring well-known locations to serve static resources。

Answer 2

这种行为的原因是，如果你创建了一个 ResourceChain，Spring 会自动创建一个 CssLinkResourceTransformer。您可以在他们的sourcecode 中看到它。这是他们框架中的默认配置。

不幸的是，它破坏了 CSS 文件中的相对路径。为了避免CssLinkResourceTransformer的默认配置，需要自己做ResourceHandling。例如这个way（不推荐！）。