使用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: ""}。
请告诉我我在这里做错了什么？

- Tavish Aggarwal

---

你应该使用 {mode: 'cors'}。 - R Lam

@TavishAggarwal 你是在获取维基媒体的图片吗？因为它们绝对有CORS标头，这段代码肯定可以运行。如果你想要获取其他第三方资源，则没有这些标头是不可能的。 - Brahma Dev

是的，@BrahmaDev.. 我正在使用模式{mode: 'no-cors'}获取第三方图像。但是我得到了一个空对象。 - Tavish Aggarwal

哦，好的。谢谢@Brahma。那我需要寻找其他替代方案了。 - Tavish Aggarwal

@Kaiido - 或许我确实 - Jaromanda X

Answer 1

默认情况下，fetch使用CORS模式。但是当服务器响应不包含“Access-Control-Allow-Origin”标头时，它会跳过响应体。

具有讽刺意味的是，您必须将模式设置为“no-cors”才能请求不透明资源。不透明响应无法通过JavaScript访问，但响应仍然可以由服务工作者提供或缓存。

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

- ekanna

---

你能解释一下如何使用“service workers”吗？我使用原始JS和fetch API，在浏览器控制台中，我可以看到服务器响应的图像，但JS promise没有Body（null）和status = 0（？！）。 - Vsevolod Azovsky