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 AngularJS Basics (1.x) Improving Our Todo App Create a Custom Directive For “todos”

Kayla Johnson
Kayla Johnson
1,798 Points
Posted by Kayla Johnson
Kayla Johnson
1,798 Points

Cannot load template file "Cross origin requests are only supported for protocol schemes: http, data, chrome"

I tried moving my template html code to a separate file called todos.html in the templates directory. I'm doing this all locally. I can' access the todos.html just fine. http://grab.by/SnTO But it throws an error when I try to set it as the template URL. http://grab.by/SnTW

XMLHttpRequest cannot load file:///Users/kaylanicole/Desktop/wmm/_angular%20project/templates/todos.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Why is this?

4 Answers

Jonathan Arbely
Jonathan Arbely
6,691 Points
Jonathan Arbely
Jonathan Arbely
6,691 Points

For example: Instead of referring to 'scripts/directives/todos.js', enter 'http://localhost/server/Treehouse/Angular/scripts/directives/todos.js'. For this you'll need a local server. I'm using XAMPP and run Apache only.

Allison Hanna
Allison Hanna
36,222 Points
Allison Hanna
Allison Hanna
36,222 Points

Here's a good starting point to learn about CORS, cross origin resource sharing: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Not sure the exact problem without seeing your code :) There are some NPM packages to deal with handling CORS as well.

Kayla Johnson
Kayla Johnson
1,798 Points
Kayla Johnson
Kayla Johnson
1,798 Points

I pasted my code above in the screenshot http://grab.by/SnTW I understand CORS but I don't see how this is the issue. Both files are in the same folder on my local computer. I'm not even working on a server.

Jerome King
Jerome King
9,568 Points
Jerome King
Jerome King
9,568 Points

you probably have this done already, but you have to start a local server in order to get it to work.