Cross origin issue for jQuery .load() for a locally placed file

Question

I am facing an annoying cross origin issue with a very basic jQuery coding. I am trying to call/load a locally placed test-1.html file from my main javascript file.

$('.load-container').load('test-1.html', function(data) {
    $('.load-container').html(data);
});

I want to populate the contents of test-1.html in a div with class load-container.

I am receiving an error in console which states:

XMLHttpRequest cannot load file:--file path--. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

I'm wondering how can calling a locally placed file cause CORS issue. I appreciate your help in solving this issue.

Answer 1

As mentioned before, this is happening because you are just opening your HTML instead of serving it from a web server.

This is easy to fix using python. Navigate to the directory where your index.html file is and do:

python -m SimpleHTTPServer 1337

Then, you can access your website in: http://localhost:1337