EmberJS部署于Nginx：如何设置请求端Cache-Control头？

一、修正Nginx响应头配置 #

你当前的响应头存在两个重复的cache-control字段，这是expires max自动生成max-age头，同时手动添加另一个Cache-Control导致的，容易引发缓存逻辑冲突。建议合并配置，统一控制缓存策略：

location ~* \.(css|eot|gif|jpe?g|js|png|svg|ttf|woff2?)$ {
  add_header Cache-Control "public, max-age=315360000, must-revalidate, proxy-revalidate";
  add_header Pragma public;
}

或者保留expires指令，移除手动添加的重复Cache-Control：

location ~* \.(css|eot|gif|jpe?g|js|png|svg|ttf|woff2?)$ {
  expires max;
  add_header Pragma public;
}

二、通过Ember构建配置解决请求头问题 #

浏览器发送no-cache请求头，大概率是页面元标签或默认构建配置导致的，可通过以下方式修正：

1. 调整环境配置与指纹策略 #

在config/environment.js中启用静态资源指纹（确保资源更新时浏览器自动获取新版本），同时确保缓存策略正确：

module.exports = function(environment) {
  let ENV = {
    // 其他基础配置
    fingerprint: {
      enabled: environment === 'production',
      extensions: ['js', 'css', 'png', 'jpg', 'gif', 'svg', 'eot', 'ttf', 'woff', 'woff2'],
    },
  };

  if (environment === 'production') {
    // 生产环境下禁用可能影响缓存的默认配置
    ENV['ember-cli-app-version'] = { enabled: false };
  }

  return ENV;
};

2. 修改index.html元标签 #

检查app/index.html是否存在强制不缓存的元标签，将其替换为合理的缓存设置：

<!-- 替换原有no-cache元标签，index.html建议短时间缓存，避免影响应用更新 -->
<meta http-equiv="Cache-Control" content="public, max-age=3600">

三、关键说明 #

• 若用户手动触发强制刷新（Ctrl+F5），浏览器会主动发送no-cache，这种情况属于用户主动行为，无法通过配置阻止；
• Ember静态资源（如vendor.js、app.css）启用指纹后，文件名会附带哈希值，即使设置长期缓存，资源更新时文件名变化，浏览器会自动请求新版本，无需担心缓存旧内容。

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