Laravel Vue项目中qrcode-vue3组件间歇性CORS问题求助

问题场景 #

Laravel Vue项目中使用qrcode-vue3组件生成带Logo的二维码，Logo存储在配置了允许所有源（*）CORS的公开S3静态资源桶，桶域名通过CloudFlare代理。多数情况下Logo能正常加载，但间歇性出现CORS错误，报错信息如下：

Access to image at 'https://static.myapp.com.au/logo_square.png' from origin 'https://lins.myapp.com.au' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
GET https://static.myapp.com.au/logo_square.png net::ERR_FAILED 200

表现为连续多次正常生成后，间隔一段时间操作就触发错误。

解决方案 #

1. 修复CloudFlare缓存导致的CORS头缺失 #

CloudFlare的缓存机制可能缓存了未携带CORS头的旧响应，导致后续请求命中缓存时出错：

• 针对Logo资源配置CloudFlare页面规则：
  • 路径匹配https://static.myapp.com.au/*logo*.png（根据实际Logo路径调整）
  • 设置缓存级别为「不缓存」，避免缓存无CORS头的响应
  • 或者开启「自定义缓存键」，将Origin头纳入缓存键，确保不同源的请求对应不同缓存条目

2. 验证S3 CORS配置的正确性与生效状态 #

即使配置了允许所有源，仍需确认S3 CORS规则是否正确：

• 检查S3桶的CORS配置是否包含GET方法、允许所有头，示例正确配置：

  [
      {
          "AllowedHeaders": ["*"],
          "AllowedMethods": ["GET"],
          "AllowedOrigins": ["*"],
          "ExposeHeaders": []
      }
  ]
  

• 用curl测试响应头是否携带CORS信息：

  curl -H "Origin: https://lins.myapp.com.au" -I https://static.myapp.com.au/logo_square.png
  

  确认返回结果中存在Access-Control-Allow-Origin: *或对应请求源的头

3. 规避前端跨域请求：后端代理或Base64转换 #

后端代理方案

在Laravel中创建代理路由，由后端请求S3 Logo并返回给前端，避免前端直接跨域：

• 创建路由：

  Route::get('/proxy-logo', function (Request $request) {
      $logoUrl = $request->query('url');
      $response = Http::get($logoUrl);
      return response($response->body())
          ->header('Content-Type', $response->header('Content-Type'))
          ->header('Access-Control-Allow-Origin', '*');
  });
  

• 前端将Logo URL替换为代理地址：

  // 替换原logos.value.square
  `https://lins.myapp.com.au/proxy-logo?url=${encodeURIComponent(logos.value.square)}`
  

Base64转换方案

将Logo转为Base64格式后传入组件，彻底避免跨域：

• 前端请求Logo并转换：

  async function getLogoBase64(url) {
      const response = await fetch(url);
      const blob = await response.blob();
      return new Promise((resolve) => {
          const reader = new FileReader();
          reader.onloadend = () => resolve(reader.result);
          reader.readAsDataURL(blob);
      });
  }
  // 在setup中调用，将结果存入变量替换原image选项
  const logoBase64 = await getLogoBase64(logos.value.square);
  

4. 强制浏览器跳过旧缓存 #

在Logo URL后添加随机参数，避免浏览器加载缓存的无CORS头响应：

// 生成qrOptions时修改image字段
"image": `${logos.value.square}?t=${Date.now()}`,

注意：此方案会降低缓存效率，需权衡使用

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