Axios CORS 无法在 chrome 部署的站点上运行

Question

我在 VueJS 应用程序中有以下方法：

const downloadImageBase64 = async imageUrl => {
  try {
    var result = await axios({
      method: "get",
      url: imageUrl,
      responseType: 'blob',
      crossdomain: true
    });

    return blobToBase64(result.data);
  }
  catch (err) {
    console.log("err: ", err);
    return "";
  }
};

我正在下载图像并将它们作为 base64 字符串返回，因为我将它们嵌入到使用 JSPDF 创建的 PDF 中。图像本身托管在 AWS S3 中。我在适当的 S3 存储桶中设置了 CORS 策略：

[
  {
    "AllowedHeaders": [
      "*"
    ],
    "AllowedMethods": [
      "GET"
    ],
    "AllowedOrigins": [
      "https://mydomain.co.za"
      "http://localhost:8082"
    ],
    "ExposeHeaders": [],
    "MaxAgeSeconds": 3000
  }
]

在我的本地主机上运行应用程序时，FireFox 和 Chrome 都可以成功下载图像：

但是，当我将应用部署到临时环境时，下载开始因 CORS 问题而失败，但仅限于 Chrome。查看请求标头，甚至没有发送 CORS 信息：

我不知道是否存在 Chrome 未在网络流量中显示的预检，但控制台给了我以下错误：

从源“https://mydomain.co.za”访问“https://my-bucket.s3-eu-west-1.amazonaws.com/my-image-path.png”的 XMLHttpRequest已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

Answer 1

事实证明，问题是我在放置下载 PDF 按钮的网页上显示图像，这意味着 chrome 会缓存这些图像，并且在尝试下载 PDF 的图像时，chrome 会返回缓存的图像而不CORS 标头。我或多或少从这里得到了答案：

https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome

所以解决方案是在下载 PDF 时在 URL 中附加一个丢弃的 get 参数：

const downloadImageBase64 = async imageUrl => {
  try {
    var result = await axios({
      method: "get",
      url: `${imageUrl}?not-from-cache-please`,
      responseType: 'blob',
      crossdomain: true
    });

    return blobToBase64(result.data);
  }
  catch (err) {
    console.log("err: ", err);
    return "";
  }
};

注意：

url: `${imageUrl}?not-from-cache-please`