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

8
votes

I'm facing this issue with chrome and IE. I have developed HTML player in that i used XML to load the data inside that player. all pages have been accessed through XML.it work fine when I use any server to load that data inside player.I use WAMP server now. But now I'm thinking about making it as an offline version and write it inside CD. but when I open my player.html file directly without having server, the XML data not going to load.it showing following error in the console.

XMLHttpRequest cannot load file:///C:/wamp/www/TTT_BR/english.xml. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

4
javascriptxmlgoogle-chromegoogle-chrome-extension
Does your extension have file checkbox enabled on chrome://extensions page? – wOxxOm
@wOxxOm I don't have checked any check box. Even I don't have added any extensions which can affect for loading my XML offline.I have used $ajax load method to load the XML data. when I use wamp it works fine, but I'm not able to see access that XML data in the offline version. function loadXmlFile(selFile){ $.ajax({ url:selFile+'.xml', method:'GET', datatype:'xml', success:function(data){ xmlDataLoad(data); } }); – Amit Golhar
To see the checkbox first enable "developer mode" on that page. – wOxxOm
@wOxxOm - I have checked that developer mode but, still throwing some error in the console. jquery-1.11.3.js:9664 XMLHttpRequest cannot load file:///C:/wamp/www/TK_B00/english.xml. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. ​ – Amit Golhar
Possible duplicate of "Cross origin requests are only supported for HTTP." error when loading a local file – user719662

4 Answers

18
votes

you must run your app in the server , use node js

1- Install NodeJS // Hint: If you're on a Mac, you want to install and use Homebrew for this

2- Open your favorite terminal emulator

2- Install http-server by running: npm install http-server -g

3- Start http-server by running: http-server 'path/to/your/angular/root/directory' -o

That last command — specifically, the -o flag — should open a browser window at: localhost:8080

OR// use cd to find your directory app
and use this command : http-server . -o

"." mean your current directory

you can see : https://teamtreehouse.com/community/i-am-not-able-to-load-my-json-file

6
votes

for testing/development purposes, the simplest solution is to use firefox browser.

2
votes

Pretty much everyone has python on mac/linux by default. Who doesent, can easily get it.

python -m SimpleHTTPServer will give you a local server @ http://localhost:8000. From there you can access whatever file you'd like for your app.

Note: use python -m http.server for python versions 3.0+

1
votes

Or you can run a web server like Apache and MySQL in XAMPP Control Panel. Put your file folder inside /htdocs inside /xampp folder and run your code in the browser using localhost.