如何在客户端用JavaScript下载图片并规避CORS错误

你的问题核心是Firebase Storage未配置跨域资源共享（CORS）规则，导致浏览器拦截了localhost发起的下载请求，同时代码里存在Content-Type配置错误，下面分两步解决：

一、配置Firebase Storage的CORS规则 #

1. 创建cors.json文件，内容如下（可根据实际需求调整允许的访问源）：

[
  {
    "origin": ["http://localhost:3000", "https://你的生产域名.com"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

2. 使用Google Cloud的gsutil工具部署配置：
   • 确保已安装并初始化gsutil（未安装可参考Google Cloud官方指引完成）
   • 执行命令（替换为你的存储桶名称）：

   gsutil cors set cors.json gs://你的存储桶名称.appspot.com
   

   配置生效需要等待几分钟，请耐心等待。

二、修正React代码中的问题 #

简化版（适用于公开可访问的SVG） #

直接利用a标签的download属性触发下载，无需fetch，避免CORS问题：

export const Download = () => {
  const url = "https://storage.googleapis.com/xxxxxxxxxx-c1d67.appspot.com/KYi5nFkjgJPuIxeDkuzvC8XfP6A3/1673110077807-0.svg?GoogleAccessId=xxxxxxxxxxx"

  const handleClickDownload = (fileUrl: string) => {
    const link = document.createElement('a');
    link.href = fileUrl;
    link.setAttribute('download', 'filename.svg');
    document.body.appendChild(link);
    link.click();
    link.parentNode?.removeChild(link);
  }

  return (
    <div>
      <img src={url} alt='result' />
      <button onClick={() => handleClickDownload(url)}>Download SVG</button>
    </div>
  )
};

fetch修正版（适用于需权限验证的私有文件） #

修正Content-Type为SVG对应类型，同时添加资源释放逻辑：

export const Download = () => {
  const url = "https://storage.googleapis.com/xxxxxxxxxx-c1d67.appspot.com/KYi5nFkjgJPuIxeDkuzvC8XfP6A3/1673110077807-0.svg?GoogleAccessId=xxxxxxxxxxx"

  const handleClickDownload = (fileUrl: string) => {
    fetch(fileUrl, {
      method: 'GET',
      headers: {
        'Content-Type': 'image/svg+xml', // 修正为SVG的正确MIME类型
      },
    })
      .then((response) => response.blob())
      .then((blob) => {
        const url = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', 'filename.svg');
        document.body.appendChild(link);
        link.click();
        link.parentNode?.removeChild(link);
        window.URL.revokeObjectURL(url); // 释放URL对象，避免内存泄漏
      })
      .catch(err => console.error('下载失败:', err));
  }

  return (
    <div>
      <img src={url} alt='result' />
      <button onClick={() => handleClickDownload(url)}>Download SVG</button>
    </div>
  )
};

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