Vue项目部署后Chrome端Axios请求S3资源出现CORS错误如何解决

开发者阿泽

2026-10-6

问题原因

S3 CORS配置语法错误：你提供的CORS配置中AllowedOrigins数组的"https://mydomain.co.za"字段后缺少英文逗号，会导致规则解析异常。本地运行时请求匹配到了后面的"http://localhost:8082"规则所以正常，部署后匹配线上域名时规则失效。
Chrome资源缓存冲突：如果此前有用户直接在Chrome地址栏访问过该S3图片，Chrome会缓存不带CORS响应头的资源结果。后续axios发起跨域请求时会直接复用该缓存响应，缺少Access-Control-Allow-Origin头就会触发报错，这也是你看不到CORS相关请求头、没有预检请求的原因。
无效配置项：axios请求中的crossdomain: true是jQuery Ajax的专属参数，对axios无效，不会触发跨域相关的头携带逻辑。

解决方案

修正S3 CORS配置语法，补全域名后的逗号，参考配置如下：

[
  {
    "AllowedHeaders": [
      "*"
    ],
    "AllowedMethods": [
      "GET"
    ],
    "AllowedOrigins": [
      "https://mydomain.co.za",
      "http://localhost:8082"
    ],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3000
  }
]

修改后等待1-2分钟让S3规则生效。

解决Chrome缓存问题，二选一即可：

给图片请求添加随机查询参数规避缓存，修改请求url为${imageUrl}?t=${Date.now()}
在axios请求中添加缓存控制头强制跳过缓存：

const downloadImageBase64 = async imageUrl => {
  try {
    var result = await axios({
      method: "get",
      url: imageUrl,
      responseType: 'blob',
      headers: {
        'Cache-Control': 'no-cache',
        'Pragma': 'no-cache'
      }
    });
    return blobToBase64(result.data);
  }
  catch (err) {
    console.log("err: ", err);
    return "";
  }
};