Locally on a Mac, I can't load html using jquery. Access header error

Question

I'm making a plain HTML/jQuery website.

I'm on a Mac / Chrome.

I've got my index page open, and in it I've written some code to include another .html page.

$( "#result" ).load( "menu.html", function() {
   alert( "Load was performed." );
});

When I refresh my index page, I get an alert saying "Load was performed", but I can't see my menu.html content in my #result div. When looking in the dev tools console I see this error:

OPTIONS file://localhost/Users/xxx/web/menu.html No 'Access Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I read about this header and it seems to only apply when you want to include content from external sites. My index and menu pages are in the same folder though so this should be enough right?

Why isn't it loading? Do I need to be viewing the index page via a mac web server? I thought it would just work this way as it's just plain html/javascript.

Thanks in advance.

Solveig

Answer 1

CORS blocks file:// urls (because they don't provide the origin header that CORS is trying to validate against), so yes, you do need to be viewing the page via a web server for this to work. http://localhost will work fine.

Answer 2

You cannot do Ajax calls locally (file://) But in OSX you can use python built-in server from the directory when your site is located. Running from a Console:

python -m SimpleHTTPServer 9090

Then access to your site with:

http://localhost:9090/