Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Scott Wilcox
Scott Wilcox
9,517 Points

.load(); not working.

I am doing a simple test.

<header id="header"></header>

<script>

$( "#header" ).load( "subpages/header.html" );

</script>

This should be very straight forward but I am getting an error in the console.

XMLHttpRequest cannot load file:///C:/Users/Scott/Documents/Website%20Files/Code%20Test%20files/subpages/header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

1 Answer

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Scott,

The short answer is you need to spin up a local server to make that work.

The long answer is Cross Origin Resource Sharing aka CORS.

From within a script, you're restricted from using http requests on local files. There are ways around this, but I'm not an expert and will let MDN fill in those details for you.

Hope this helps,

Cheers