Angularjs Error: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https

Running AngularJS locally? Let's talk servers

Are you trying to run your AngularJS application from file:// URLs? Hold your horses! Browsers like Chrome disapprove it because of CORS. It's high time you serve your app using a local server. This makes testing more akin to a production environment.

Riding the http-server wave

Rock this Node.js powered http-server and serve like a champ:

npm install -g http-server // Installing globally, because why not?
http-server -o // Fire it up and start serving!


Now, prestigious localhost is your new playground. Welcome to a CORS-friendly zone.

Not a Node lover? No worries!

We got you covered. If Node.js is not your cup of tea, flash your Python skills by using SimpleHTTPServer:

python -m SimpleHTTPServer // Harry Potter's wand got nothing on this.

For fans of WebStorm or Visual Studio Code, consider their built-in servers. A toast to productivity!

Chrome warriors, heed!

Let's be frank, it's a quickie but a nasty one, starting Chrome with --disable-web-security. Treat it as your weapon of last resort.

Deployment time? Say 'Goodbye' CORS!

Once you move your application to a server (Apache, Nginx, etc.), these nagging issues will vanish. Your server got your back with those sweet sweet http/https protocols.

Paths: The devil lies in the detail

When referencing files, ensure reliable paths. Remember, 'A stitch in time, saves nine.'

Even Browserman from Comictopia needs a clear address. Always cross reference your URLs in AngularJS apps with a http:// or https://. This clears things up.

Temporary fix? Firefox to the rescue!

Firefox dons the cape at times, playing nice with liberal file requests. Remember, it's temporary relief not a cure.

Sidestep the snags

Directives: The path less travelled

Are your AngularJS directives playing hide-n-seek? If they reference template URLs, make sure the paths are accurate. No one likes a broken compass.

<my-directive ng-include="'/partials/my-template.html'"></my-directive> // the treasure is where 'X' marks the spot


'file://' is the villain in this plot

Remember, the web is not a huge local filesystem. Stick to http/https during development to keep the peace.

Browsers ask: 'Are thou friend or CORS-enemy?'

Security is a priority in modern browsers. A local server setup is akin to a secret handshake, bypassing potential CORS restrictions during development.