Chrome - Fetch API cannot load file. How to workaround?

Question

I have the following two files:

index.html

<html>
<head>
<meta charset="utf-8" />
<title>Web Page</title>
<style type="text/css">
.text {
    display: inline-block;
    font-family: tahoma;
    font-size: 14px;
    max-width: 400px;
    background-color: #ddedff;
    padding: 10px;
    text-align: justify;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    get_data('info.txt');
});
function get_data(file) {
    var request = new Request(file);
    fetch(request).then(function(response) {
        return response.text().then(function(text) {
            $('.text').html(text);
        });
    });
}
</script>
</head>
<body>
    <div class="text"></div>
</body>
<html>

info.txt

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

When I open on Mozilla Firefox the file: README.html through this local URI:

file:///C:/testing/README.html

it works as expected, I mean, the text on file: info.txt is displayed properly.

But when I open the same URI on Google Chrome I get a blank screen and the following error on the console:

README.html:26 Fetch API cannot load file:///C:/testing/README.md. URL scheme must be "http" or "https" for CORS request.
get_data @ README.html:26
README.html:26 Uncaught (in promise) TypeError: Failed to fetch
    at get_data (README.html:26)
    at HTMLDocument.<anonymous> (README.html:21)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

Do you have what can I do so I can open local files on Google Chrome as I can do on Mozilla Firefox?

If I have to do some tweak on:

chrome://flags/

that's acceptable for me.

EDIT

I tried launching Google Chrome from the command line with the flag: --allow-file-access-from-files as recommended here but now I get the following error:

README.html:26 Fetch API cannot load file:///C:/testing/README.md. URL scheme "file" is not supported.
get_data @ README.html:26
README.html:26 Uncaught (in promise) TypeError: Failed to fetch
    at get_data (README.html:26)
    at HTMLDocument.<anonymous> (README.html:21)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

Thanks!

The answer to your problem is in the error message that Chrome provided. Chrome doesn't let you load local files through file:///... for security reasons. If this is an application that you're working on to only be used locally, then you could download a Chrome application that creates a web server for you in a certain local directory. Web Server for Chrome is one that Google suggests when working on their Code Labs — Denno
– Denno, Commented Apr 22, 2018 at 23:15
there is no chrome://flags/ tweak, only a command line tweak. Start chrome with command line option that allows file:/// pages to access file:/// resources like that - I don't know the option off hand, a quick google search should help — Jaromanda X
– Jaromanda X, Commented Apr 22, 2018 at 23:20
Seems like Chrome's fetch just won't play with file:// URL scheme these days. Have you considered XHR? Or, better still, using a local http server? — Jaromanda X
– Jaromanda X, Commented Apr 23, 2018 at 0:04

Hashbrown · Accepted Answer · 2020-01-27 05:53:06Z

11

For chrome you still need --allow-file-access-from-files (and I recommend installing a separate chrome and using it solely for these projects to stay secure), but just shim fetch() for XMLHttpRequest for file:// requests:

if (/^file:\/\/\//.test(location.href)) {
    let path = './';
    let orig = fetch;
    window.fetch = (resource) => ((/^[^/:]*:/.test(resource)) ?
        orig(resource) :
        new Promise(function(resolve, reject) {
            let request = new XMLHttpRequest();

            let fail = (error) => {reject(error)};
            ['error', 'abort'].forEach((event) => { request.addEventListener(event, fail); });

            let pull = (expected) => (new Promise((resolve, reject) => {
                if (
                    request.responseType == expected ||
                    (expected == 'text' && !request.responseType)
                )
                    resolve(request.response);
                else
                    reject(request.responseType);
            }));

            request.addEventListener('load', () => (resolve({
                arrayBuffer : () => (pull('arraybuffer')),
                blob        : () => (pull('blob')),
                text        : () => (pull('text')),
                json        : () => (pull('json'))
            })));
            request.open('GET', resource.replace(/^\//, path));
            request.send();
        })
    );
}

This shim will;

only activate for html files opened locally (outer if statement),
call the normal fetch() for any url that doesn't specify protocol (and thus non-file:// requests), and
will replace absolute paths (/root/bob.html) with ones relative to the current path (since that would dangerously evaluate to C:\ or equivalent)

Set path to something else if your index.html isn't actually at the root for the project.
If you need support for init, or anything other than text(), you'll need to add it.
Explicit file:// requests wont be fulfilled, that's on purpose, but if you really do know what you're doing, you'll know how to make this work for you, and if you don't you shouldn't.

The following is useful if you're going to be doing this for multiple files. Swap out './' for document.currentScript.getAttribute('data-root'). Now you can put that snippet into its own file, say filesystemHelper.js, and call like so in the various files:

<script src="../filesystemHelper.js" data-root="../"></script>

Pretty snazzy.

answered Jan 27, 2020 at 5:53

Hashbrown

13.2k9 gold badges82 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Oliver Bock Over a year ago

Stick it in a <script> tag before your code runs using fetch()

Oliver Bock Over a year ago

Note that this shim has some limitations: it doesn't include ok and other Response members. It also looks like Chrome on Windows doesn't guess the MIME type based on the file extension, at least not for .json

bryc Over a year ago

Isn't XMLHttpRequest also blocked locally in Chrome? This error still occurs: Access to XMLHttpRequest at 'x' from origin 'null' has been blocked by CORS policy. Am I doing this wrong, or does this not work out of the box?

rbennell Over a year ago

you bloody legend

Collectives™ on Stack Overflow

Chrome - Fetch API cannot load file. How to workaround?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related