Meteor 1.10.1与S3交互的Chromium浏览器缓存CORS异常问题

问题现象 #

• 特定用户上传曾上传过的图片时，向S3发起的请求返回200状态码，但浏览器触发CORS错误
• 清除Chrome缓存后可正常上传，未清缓存的浏览器仍报错；同一账号在不同设备登录均出现该问题
• 已确认S3 CORS配置为宽松规则，95%用户无此问题，排除图片格式、大小等因素

可能原因 #

Meteor客户端缓存机制（含第三方上传包的缓存逻辑）可能对重复上传的请求或关联元数据做了持久化缓存，导致：

1. 上传请求复用了缓存的旧请求头，丢失CORS校验所需的Origin等字段
2. 缓存的S3签名URL或上传凭证已过期，其关联的CORS规则与当前请求不匹配
3. S3返回的旧响应被浏览器缓存，响应头不符合当前CORS校验要求

解决方案 #

1. 强制上传请求跳过客户端缓存 #

在上传请求中添加缓存控制头，强制浏览器不使用缓存：

// 原生XMLHttpRequest示例
const uploadReq = new XMLHttpRequest();
uploadReq.open('PUT', s3UploadUrl, true);
// 添加缓存禁用头
uploadReq.setRequestHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
uploadReq.setRequestHeader('Pragma', 'no-cache');
uploadReq.setRequestHeader('Expires', '0');
// 执行上传逻辑
uploadReq.send(file);

如果使用edgee:slingshot等Meteor上传包，可在指令配置中添加自定义头：

Slingshot.createDirective("s3ImageUpload", Slingshot.S3Storage, {
  bucket: 'your-bucket-name',
  // 其他配置...
  headers: function(file) {
    return {
      'Cache-Control': 'no-cache, no-store, must-revalidate',
      'Pragma': 'no-cache',
      'Expires': '0'
    };
  }
});

2. 清除账号关联的上传元数据缓存 #

同一账号跨设备出现问题，大概率是Meteor客户端localStorage或Session缓存了旧的上传凭证/签名URL。在用户登录时清除相关缓存：

Accounts.onLogin(() => {
  // 替换为实际缓存的键名
  localStorage.removeItem('s3_upload_signature');
  Session.set('current_upload_credentials', null);
});

3. 调整S3对象的缓存策略 #

检查S3存储桶中已上传图片的Cache-Control响应头，若缓存时间过长，会导致浏览器复用旧响应触发CORS错误：

• 上传图片时主动设置Cache-Control: max-age=3600, must-revalidate（短缓存+强制校验）
• 批量修改已有对象的缓存头（可通过S3控制台或AWS CLI操作）

4. 禁用Meteor HTTP请求缓存 #

若上传流程中涉及GET请求获取S3签名URL，禁用MeteorHTTP包的缓存：

HTTP.get('/api/get-s3-signature', {
  headers: { 'Cache-Control': 'no-cache' }
}, (error, result) => {
  // 使用返回的签名URL执行上传
});

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