• • 此问题在此处已有答案**：

Firebase Storage and Access-Control-Allow-Origin（5个答案）
昨天关门了。
在我的React应用程序中，我正确地显示了一个图像（在本例中是一个SVG），我希望用户可以点击一个按钮下载它。
它不起作用，因为我得到了CORS错误：

• CORS策略阻止了从源地址"http：//localhost：3000"获取"xxxxxxxxxxx"的访问权限：对印前检查请求的响应未通过访问控制检查：请求的资源上不存在"Access-Control-Allow-Origin"标头。如果不透明响应满足您的需要，请将请求的模式设置为"no-cors"以在禁用CORS的情况下提取资源。*

这是我的代码：

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': 'application/pdf',
      },
    })
      .then((response) => response.blob())
      .then((blob) => {
        // Create blob link to download
        const url = window.URL.createObjectURL(
          new Blob([blob]),
        );
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute(
          'download',
          `filename.svg`,
        );

        // Append to html link element page
        document.body.appendChild(link);

        // Start download
        link.click();

        // Clean up and remove the link
        link.parentNode?.removeChild(link);
      });
  }

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