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.

Nicolas Yuste · Accepted Answer · 2020-04-22 06:46:36Z

4

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

answered Apr 22, 2020 at 6:46

Nicolas Yuste

74310 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ppt Over a year ago

python3 -m http.server 1337 for Python 3 and above

sethg Over a year ago

Does the port have to be 1337, or can it be anything?

Rory McCrossan · Accepted Answer · 2016-06-23 08:21:43Z

2

This error means that you're making a request to a file:// protocol, which is not allowed for security reasons. You need to run your request on a webserver. If you have no remote server, you can install XAMP or IIS on your local machine. There are plenty of guides available on how to do this.

Also note that your jQuery code does not require a callback function, you can reduce it to just this:

$('.load-container').load('test-1.html');

answered Jun 23, 2016 at 8:21

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

5 Comments

NewBee Over a year ago

OK. So can you suggest any alternate solution to make the call 'locally' with jQuery ?

Rory McCrossan Over a year ago

Unfortunately not as you need to use a webserver as I mentioned. This is a security restriction of all browsers. It would be a big flaw if you could get around it.

NewBee Over a year ago

Ahh. That's sad. Well, thanks Rory for your quick answer. Appreciate it :)

A. Wolff Over a year ago

@Ayan For chrome that should do it: chrome-allow-file-access-from-file.com (just for testing purpose of course). On FF, not sure about lastest version but on older one there was no restriction. For IE, i don't know. BUT Rory is correct, better is just to run a local server (WAMP, XAMP, LAMP or whatever)

NewBee Over a year ago

@ A. Wolff Unfortunately, it didn't really work. I would go ahead with IIS for the time being. Appreciate your help though. Thanks.

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related