为什么当我使用 blob 从 ArrayBuffer 加载资源时，我在 chrome 上收到“不允许加载本地资源”错误

Question

>我需要从ArrayBuffer加载图像。我看到一些文章说使用 Blob 是最有效的方法。

这是我编写的将数组缓冲区转换为 blob url 的代码。

        const blob = new Blob([new Uint8Array(arrayBuffer, offset,length)], {
            type: mimeType
        });
        url = window.URL.createObjectURL(blob);

数组缓冲区是通过对 XMLHttpRequest 获取的另一个数组缓冲区进行切片来创建的数组缓冲区的实例。

然后，我尝试像这样从生成的对象 URL 中获取图像。

    const imgTag = new Image();
    imgTag.onload = () => {
      resolve(imgTag);
    };
    imgTag.onerror = (e) => {
      reject(e);
    };
    imgTag.src = url;
  });

但是我Not allowed to load local resource收到错误.生成的对象网址类似于blob://https://localhost:9443/056abc73-c2d8-47dd-b2c7-24e1966a5221。

我可以在火狐上访问生成的对象网址。而且火狐不会像chrome那样抛出错误。

有什么问题吗？

Answer 1

这是因为chrome有一些安全原因不允许从文件系统访问。

打开出现错误的页面并检查URL。

如果是这样的：

file:///C:/Users/desktopname/projectfolder//yourfile.html

您

看到URL的第一个单词是文件，这意味着您正在从文件系统访问文件，而Chrome/Oprea正在阻止您的请求。

尝试在 http://localhost/portnumber 上运行您的项目（此链接您可以继续在您选择的框架上运行您的项目。 就我而言，我在 Visual Studio 上运行）

** 我在 chrome 和 opera 网络浏览器上发现了这个问题。 这在Mozila Firefox和Microsoft Edge上工作。