使用 Fetch 下载图像 API

Question

我知道这个问题已得到解答，但我在使用 Fetch API 下载图像时遇到问题。
我用来获取图像的代码。

function downloadImage() {
  fetch('https://upload.wikimedia.org/wikipedia/commons/9/98/Pet_dog_fetching_sticks_in_Wales-3April2010.jpg',
    {mode: 'no-cors'})
  .then(response => response.blob())
  .then(blob => {
        console.log(blob);           
  });
}

在这里，当我执行 console.log 时，我得到响应 Blob {size: 0, type: ""}。
请让我知道我在这里做错了什么？

Answer 1

默认情况下，fetch 使用 CORS 模式。但是当服务器响应不包含 'Access-Control-Allow-Origin' header 时。它跳过响应 body。

具有讽刺意味的是，您必须将模式设置为 'no-cors' 请求不透明的资源。不透明的响应不能使用 JavaScript 访问，但响应仍然可以由 service worker 提供或缓存。

https://developers.google.com/web/ilt/pwa/working-with-the-fetch-api

使用 Fetch 下载图像 API

Download Image using Fetch API

javascript

fetch-api