解决异步请求OBS图片偶发跨域问题

在前端通过 fetch 拉取华为云 OBS 图片时，若出现偶发跨域问题，配置 cache: 'no-cache' 是一种高效的解决手段。要理解其生效原因，需从浏览器缓存机制和CORS 响应头的时效性两个维度拆解。

问题背景：偶发跨域的核心矛盾

当你在本地开发环境（如 http://localhost:xxxx）请求 OBS 图片时，会偶尔触发如下跨域错误：

plaintext

Access to fetch at 'https://xxx.obs.cn-east-3.myhuaweicloud.com/xxx.jpeg' from origin 'http://localhost:5174' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present...

但同一资源有时又能正常拉取，这种 “时好时坏” 的现象，本质是 ** 浏览器缓存的 “历史残留” 与 OBS CORS 配置 “更新延迟”** 共同导致的。

为什么 cache: 'no-cache' 能解决问题？

cache: 'no-cache' 是 fetch 请求中用于控制浏览器缓存策略的配置项，其核心作用是强制浏览器每次请求都去校验缓存资源的有效性，而非直接复用旧缓存。

具体逻辑可分为以下两步：

1. 不直接复用旧缓存，强制发起 “校验请求”

当配置 cache: 'no-cache' 后，浏览器不会直接使用本地缓存的资源，而是会先向 OBS 服务器发送一个 **“校验请求”**（携带 If-Modified-Since 或 ETag 头），询问 “当前缓存的资源是否还是最新的？”。

2. 确保拿到带正确 CORS 头的最新资源

• 若 OBS 服务器返回 304 Not Modified（资源未变），浏览器才会复用缓存，但此时缓存的是OBS 已配置 CORS 后的最新响应头（含 Access-Control-Allow-Origin）。
• 若 OBS 服务器返回新资源（200 OK），则直接拉取最新资源，其响应头也会包含正确的 CORS 配置。

对比：默认缓存策略的 “隐患”

在未配置 cache: 'no-cache' 时，fetch 默认使用 cache: 'default' 策略：

• 若浏览器缓存的资源 “未过期”，会直接复用旧缓存，而旧缓存可能是 “OBS 未配置 CORS 时” 的响应（响应头缺少 Access-Control-Allow-Origin），从而触发跨域错误。

操作建议

在解决此类偶发跨域问题时，建议按以下步骤处理：

1. 优先检查华为云 OBS 桶的 CORS 规则：确保允许的来源、方法、头域配置完整（覆盖开发和生产环境）。
2. 前端请求中添加 cache: 'no-cache'：即使 OBS 配置正确，也能避免旧缓存的干扰，确保每次请求都能拿到带正确 CORS 头的最新资源。

示例代码如下：

const fetchOBSImage = async (imageUrl) => {
  const response = await fetch(imageUrl, {
    mode: 'cors', // 显式声明 CORS 模式
    cache: 'no-cache', // 强制校验缓存有效性
    method: 'GET'
  });

  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }

  return await response.blob(); // 后续可转 File 或直接使用
};

通过 cache: 'no-cache' 强制浏览器校验缓存，可从根源上规避 “旧缓存残留无 CORS 头” 的偶发问题，同时不影响正常的缓存性能（仅增加轻量的校验请求），是前端解决此类跨域问题的高效手段。