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 ?