为什么我可以获取数据 URI？

问题描述

为什么 fetch() 对数据 URI 起作用？

不久前，当我学习如何使用 XMLHttpRequest 和 fetch 时，我完全没有看到任何文档说明这些方法可以用于除 HTTP 请求之外的任何内容。我在 Firefox 和 Chrome 上都试过这个，得到了相同的结果。自己试试。

(async function() {
  let dataURI = 'data:text/plain,' + encodeURIComponent('Why does this work?'),fetchResponse = await fetch(dataURI),fetchBlob = await fetchResponse.blob();
  console.log(URL.createObjectURL(fetchBlob));
})()

以下最终简化了数据 URI 到 blob 的转换，而不是执行类似 this question 的操作：

await(await fetch('data:text/plain,42').blob()

解决方法

如果请求方法为 GET、about:blank、blob: 和 data:，则获取算法允许向 file:、http[s]: 发出请求。 source

由于 XMLHTTPRequest 执行 same-origin 请求，它甚至还有进一步的限制，与 data: 无关，但我在 this answer 中进行了描述。

因此获取 data: URI 是完全有效的，它甚至是将此类 URI 转换为 Blob 的常用方法。