Angular+Express部署后Chrome加载旧JS文件引发MIME类型错误排查

核心原因 #

这确实是缓存相关问题，具体触发逻辑是：

1. 新版本部署后，旧的带哈希JS文件会被GAE替换删除；
2. 若浏览器缓存了旧的index.html，会请求其中引用的旧JS文件，而该文件已不存在；
3. 服务器（或GAE默认配置）会将404请求 fallback 到index.html，导致浏览器拿到HTML内容，但期望的是JS模块，最终触发MIME类型错误，出现空白页。

你之前的Express配置给所有静态资源都设置了no-store，但问题出在GAE的缓存层可能覆盖了响应头，或者缓存策略的粒度不够精准。

具体解决方案 #

1. 精准区分静态资源与index.html的缓存策略

给带哈希的静态资源设置长期缓存（文件名唯一，不会冲突），仅对index.html严格禁用缓存：

const path = require('path');
const express = require('express');
const app = express();

// 静态资源缓存配置
const staticOptions = {
  setHeaders: (res, filePath, stat) => {
    // 匹配Angular打包后带哈希的资源
    const hashedAssetRegex = /.[0-9a-f]{8,}\.(js|css|png|jpg|svg|woff2|ttf)$/;
    if (hashedAssetRegex.test(filePath)) {
      // 长期缓存，永不过期
      res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
    } else {
      // 非哈希资源（如index.html、favicon）禁用缓存
      res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
      res.setHeader('Expires', '0');
      res.setHeader('Pragma', 'no-cache');
    }
  }
};

app.use(express.static(path.join(__dirname, 'dist/dashboard'), staticOptions));

// Angular路由fallback，确保刷新非根路径时返回最新index.html
app.get('*', (req, res) => {
  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
  res.setHeader('Expires', '0');
  res.sendFile(path.join(__dirname, 'dist/dashboard/index.html'));
});

2. 配置GAE的app.yaml覆盖默认缓存规则

GAE会自动缓存静态资源，需在app.yaml中明确缓存策略，优先级高于Express的响应头：

runtime: nodejs20 # 替换为你的Node.js版本

handlers:
  # 优先匹配带哈希的静态资源，设置长期缓存
  - url: /(.*.[0-9a-f]{8,}\.(js|css|png|jpg|svg|woff2|ttf))$
    static_files: dist/dashboard/\1
    upload: dist/dashboard/(.*.[0-9a-f]{8,}\.(js|css|png|jpg|svg|woff2|ttf))$
    expiration: "365d"
    headers:
      Cache-Control: "public, max-age=31536000, immutable"

  # 处理index.html和其他非哈希资源，禁用缓存
  - url: /(.*)
    static_files: dist/dashboard/index.html
    upload: dist/dashboard/index.html
    headers:
      Cache-Control: "no-cache, no-store, must-revalidate"
      Expires: "0"
      Pragma: "no-cache"

注意：GAE的handlers按顺序匹配，带哈希的规则必须放在前面。

3. 验证缓存头是否生效

部署后用curl命令验证：

• 检查index.html的缓存头：

  curl -v https://你的应用域名.com/
  

  需确保返回的Cache-Control为no-cache, no-store, must-revalidate。
• 检查静态资源的缓存头：

  curl -v https://你的应用域名.com/main.xxxxxx.js
  

  需确保返回的Cache-Control为public, max-age=31536000, immutable。

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