React从S3预签名URL下载图片遇CORS错误求助

排查步骤及解决方案： #

1. 修正React代码的fetch参数错误
   你代码里的header是拼写错误，正确属性名是headers（复数）；另外预签名URL已经包含完整的认证信息，不需要手动指定Content-Type——多余的请求头会触发浏览器预检OPTIONS请求，反而可能导致CORS验证失败。修改后的代码：

   const handleDownload = async (imageURL) => {
       setisLoading(true)
       console.log(imageURL,'+',auth.token)
       try {
         // 移除多余的headers配置，直接请求预签名URL
         const response = await fetch(imageURL);
         
           if(response.ok){
             console.log('ok')
             const blob = await response.blob();
             const url = window.URL.createObjectURL(blob);
             const a = document.createElement('a');
             a.href = url;
             a.download = 'unik-photograhy-image';
             document.body.appendChild(a);
             a.click();
             document.body.removeChild(a);
             window.URL.revokeObjectURL(url);
           }
       
       } catch (error) {
         console.error('Error downloading image:', error);
       }finally{
         setisLoading(false)
       }
     };
   

2. 绕开fetch，直接用a标签下载（更简洁方案）
   如果仅需完成下载操作，不需要读取图片内容，可以完全跳过fetch，直接通过a标签指向预签名URL，这种方式不会触发CORS预检：

   const handleDownload = (imageURL) => {
       setisLoading(true);
       try {
           const a = document.createElement('a');
           a.href = imageURL;
           a.download = 'unik-photograhy-image';
           document.body.appendChild(a);
           a.click();
           document.body.removeChild(a);
       } catch (error) {
           console.error('Error downloading image:', error);
       } finally {
           setisLoading(false);
       }
   };
   

3. 修复S3 CORS配置的语法错误
   你提供的CORS规则里有多余的>!符号，这会导致配置无效，修正后的正确配置：

   [
       {
           "AllowedHeaders": [
               "*"
           ],
           "AllowedMethods": [
               "GET",
               "PUT",
               "POST",
               "DELETE"
           ],
           "AllowedOrigins": [
               "http://localhost:3000",
               "other domains"  // 替换为实际域名，移除多余符号
           ],
           "ExposeHeaders": []
       }
   ]
   

   保存后等待几分钟让配置生效（S3 CORS变更不会即时生效）。

4. 清除浏览器缓存
   浏览器可能缓存了旧的CORS响应头，强制刷新页面（Ctrl+Shift+R）或清除缓存后再测试。

5. 检查预签名URL生成逻辑
   确保生成预签名URL时指定的HTTP方法是GET，且没有额外的请求头限制——如果预签名时绑定了特定请求头，实际请求时的头必须完全匹配，否则会触发验证失败。

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