javascript - Cross origin requests on local

I'm trying something really simple but for some reason it doesn't work :

index.html :

js/main.js :

window.onload=function(){
    main();
}


function main(){

    $("header").load("./pages/header.html"); 
    $("#content").load("./pages/home.html");
}

Errors I get when I launch index.html :

Failed to load file:///E:/Dev/Eclipse/SyriLab/pages/header.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Failed to load file:///E:/Dev/Eclipse/SyriLab/pages/home.html: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Everything is local, same root, I'm just trying to make a basic html page, including bootstrap and jquery (poper too, not sure what it is but was on the bootstrap page). And using something similar to "include" in php, but with regular js and html.

What am I doing wrong here ?

Answer

Based on your question, it seems you are trying to access the index.html as a local file. Instead of that, you must use webserver (e.g. nginx, apache etc) to access the file. The jQuery's load method will not be able to load the file due to the protocol used for accessing local file is file://. Such requests are prohibited by the browsers due to security reasons.

Configure a webserver and try to access the index.html using http protocol and your code should work.