how to fetch a file in the same directory in javascript since firefox 68

1.4k views Asked by At

I'm using vanilla js to load some HTML parts of a static web page, it's for the header and the footer so I don't have to rewrite them on every new pages I create. I write them in a text file and add them to the page with a fetch :

folder structure :

..
index.html
elements/
    header.html
scripts/
    scripts.js

content of ./scripts/scripts.js

insert_html("./elements/header.html", ".header");

function insert_html(text_from, insert_to) {
    fetch(text_from)
        .then(response => {
            return response.text()
        })
        .then(data => {
            document.querySelector(insert_to).innerHTML = data;
        });
}

It used to work pretty well until recently, it's now broken on local, but it still works online, I think because fetch() replace the relative path by the https://example.com/file url of the website when it's online, but it replaces it by the file:///path/to/the/file url in local

Indeed, the reason it broke is because of a security fix that came with Firefox 68, here : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp about cross origin requests, because allowing to fetch another file in the same directory was a pbm, so now you can't use a file:/// path anymore

How can I make it work locally ? I don't know how to use a https:// path for a local use ?

0

There are 0 answers