Java Web应用整合Webpack后如何覆盖重复HTTP缓存头？

我来帮你搞定这个头疼的缓存头冲突问题！你遇到的情况其实挺常见的：JS文件出现两个矛盾的Cache-Control头，导致浏览器没法正常缓存，而CSS却没问题。首先得明确一点：这个额外的no-cache头肯定不是Node/Webpack设置的——Webpack只负责打包生成文件，根本不会插手Servlet容器的响应头配置。它大概率来自这几个地方：

• 你的Servlet容器（比如Tomcat）默认对JS这类文件有缓存策略设置
• 项目里还有其他过滤器比你的自定义过滤器先执行，偷偷加了no-cache头
• 安全框架（比如Spring Security）或者其他组件自动添加了缓存控制头

下面给你几个可行的解决方案，按优先级从高到低排列：

方案1：在自定义过滤器中强制覆盖缓存头 #

最直接的办法就是在你的过滤器里，先清除已经存在的Cache-Control头，再设置自己的。这样不管之前有没有其他头，都会被替换掉。给你个示例代码：

public class CacheControlFilter implements Filter {
    private static final int CACHE_AGE = 31536000; // 1年，单位秒

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) response;
        
        // 先移除所有已存在的Cache-Control头，避免冲突
        httpResponse.removeHeader("Cache-Control");
        // 设置我们想要的长缓存头
        httpResponse.setHeader("Cache-Control", "max-age=" + CACHE_AGE);
        
        // 可选：加上Expires头，兼容一些老版本浏览器
        long expiresTime = System.currentTimeMillis() + (long) CACHE_AGE * 1000;
        httpResponse.setDateHeader("Expires", expiresTime);
        
        chain.doFilter(request, httpResponse);
    }

    // init和destroy方法按你的需求实现即可，这里省略
}

注意：用removeHeader比直接setHeader更稳妥，因为如果之前有多个同名头，removeHeader会把它们全清掉。

方案2：排查并干掉其他设置缓存头的来源 #

如果方案1解决了问题，那最好；如果没解决，就得找找是谁在搞鬼：

• 检查Servlet容器配置：比如Tomcat的conf/web.xml里有没有针对*.js的特殊配置？有些容器默认会把JS当成“潜在动态资源”，自动添加no-cache头。你可以在项目自己的web.xml里覆盖这个配置，给*.js设置正确的缓存策略。
• 调整过滤器执行顺序：在web.xml中，filter-mapping的顺序就是过滤器的执行顺序。把你的CacheControlFilter的映射放在最前面，确保它是第一个处理响应的过滤器，这样后面的过滤器就没法覆盖你的设置了（当然，最好还是排查掉那些多余的设置）。
• 检查安全框架：如果你用了Spring Security这类组件，它默认会添加一些安全相关的缓存头（比如no-cache）来防止敏感信息被缓存。你可以在配置里禁用这个功能，比如Spring Security中：

  @Override
  protected void configure(HttpSecurity http) throws Exception {
      // 禁用默认的缓存控制头设置
      http.headers().cacheControl().disable();
  }
  

方案3：确认JS文件的资源处理方式 #

有时候JS文件会被当成动态资源处理（比如被DispatcherServlet接管），而CSS却被当成静态资源，这就导致容器给JS加了额外的缓存头。你可以检查项目的配置：

比如在Spring MVC中，确保静态资源映射正确，让*.js和*.css都被当成静态资源处理：

<mvc:resources mapping="/static/**" location="/static/" />

如果是Servlet 3.0+，也可以用@WebServlet来专门处理静态资源，避免被动态Servlet接管。

最后，记得测试的时候用浏览器开发者工具的Network标签，查看JS文件的响应头，确认只有你设置的Cache-Control: max-age=31536000存在就ok了！

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