How can I load a generic header and footer that I've made into multiple HTML files using jQuery?

I want to write a generic Header and Footer that will be loaded into every html file i want, so when i want to modify either one, it will be modified on all the pages.

From the research I’ve done, I found that you can do that with jQuery by doing:

$(document).ready(function () {
    $('header').load('header.html')
    $('footer').load('footer.html')
})

And it worked. I’ve been building my page using it, in combination with Live Server (the VS Code extension), everything was great until i tested it by opening it from File Explorer. And it doesn’t work like that. It gives me the following error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file: path/to/src/header.html. (Reason: CORS request not http).

I understand that it has something to do with security policies. Is there some kind of workaround or I will have to copy-paste the header and footer into every file and just deal with it this way? And why does it work via Live Server and doesn’t work when I open it statically.

I have to mention that even though I know some JS, those are my first jQuery lines of code and I am not sure how it works under the hood.