Why I got `Not allowed to load local resource` error on chrome when I use blob to load resource from ArrayBuffer?

问题

I need to load an image from ArrayBuffer. I saw some articles says using Blob is the most efficient way to make it.

This is the code I wrote to convert arraybuffer to blob url.

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

The array buffer is instance of array buffer that is created by slicing another array buffer fetched by XMLHttpRequest.

And then, I tried to fetch the image from generated object URL like this.

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

But I got an error Not allowed to load local resource. The generated object url is like blob://https://localhost:9443/056abc73-c2d8-47dd-b2c7-24e1966a5221.

I could access generated object url on firefox. And firefox won't throw error like chrome.

Is there something wrong?

回答1:

This is because chrome has some security reasons to not allowing access from file system.

open the page which gets you error and check url.

If it is something like:

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

you see first word of url is file which means you are accessing file from file system and chrome / oprea are blocking your request.

try to run your project on http://localhost/portnumber (This link you can get on running your project on framework of your choice. in my case, i am running on visual studio)

** I found this issue on chrome and opera web browsers. this working on mozila firefox and microsoft Edge.

来源：https://stackoverflow.com/questions/41648553/why-i-got-not-allowed-to-load-local-resource-error-on-chrome-when-i-use-blob-t

标签

javascript

blob

arraybuffer