Why is CORS policy blocking me from loading in HTML snippets from the same folder?

Question

I am trying to use the query load() method to load in html from other files into a div.

  $(document).ready(function(){
      $("#president").click(function(){
      event.preventDefault();
      $('#content').load('president.html')
    });
    });

Here, I want to load president.html into my content div when a button is pressed. The content div looks like this:

 <div class="col-md-7" id = "content">
    </div>

When I try to click the button, I get this error in the console:

Access to XMLHttpRequest at 'file:///UsersKunal/testing/president.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Both files are in the same folder.

file:// is a different protocol than the allowed ones. A question: are you running that page locally? — casenonsensitive, Jul 15 '20 at 21:03

score 1 · Answer 1 · answered Jul 15 '20 at 21:15

You will need to set up a localhost server on your computer using something like XAMPP on windows or macOS Server on macOS (alternatively, if you want more control, Homebrew is good as well).

Reason being that file:// is not a valid protocol and will be blocked by all browsers, due to previous security issues that the current CORS prevents.

See the documentation at the above sites I referenced for how to set up a proper testing environment, and that will solve your issues.

Why is CORS policy blocking me from loading in HTML snippets from the same folder?

1 Answers1