Error message 'XMLHttpRequest cannot load. Cross origin requests are only supported for HTTP in AngularJS'

Question

This is my code:

MyAppModule.factory('EventData', function($http,$log){
    return {
        getEvent : function(successcb){

            $http({method: 'GET', url: './js/Services/products.json'}).

            success(function(data) {
                $log.info("success");
            }).
            error(function(data) {
                $log.info("error");
            });
        }
    };
});

I have a simple JSON file in a local location, and I am trying to read it using the http method of AngularJS. I am getting the following error:

XMLHttpRequest cannot load file:///C:/Users/Avraam/Documents/GitHub/AngularJS/app/js/Services/products.json Cross origin requests are only supported for HTTP. angular.min.js:73 Error: A network error occurred.

What is my mistake? I am not using any server; I am just openning my index file with Chrome. Is this the mistake? Should I use a server if I want to use the http method?

Answer 1

If this is for local development and you are using Chrome, you need to run Chrome with a couple of arguments to relax security like this:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security

Answer 2

I fixed this problem by running my page off a server, like this

cd /path/to/dir/with/the/index/file
python3 -m http.server

then open http://localhost:8000 in your browser.

For other ways of serving the current directory, see this question.

Answer 3

For Mac users the respective command would be:

open /Applications/Google\ Chrome.app --args --allow-file-access-from-files --disable-web-security

Update:

open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir="/tmp/chrome_dev_test" --allow-file-access-from-files --disable-web-security

Source

Answer 4

If you're in Windows environment, and use npm for package management the easiest is to install http-server globally:

npm install -g http-server

Then simply run http-server in any of your project directories:

Eg. d:\my_project> http-server

Starting up http-server, serving ./ Available on: http:169.254.116.232:8080 http:192.168.88.1:8080 http:192.168.0.7:8080 http:127.0.0.1:8080 Hit CTRL-C to stop the server

Easy, and no security risk of accidentally leaving your browser open vulnerable.

Answer 5

The following command works for me. But before the command, you need to stop chrome process anyhow, can be from task manager

 "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security

Another way to make this working is as follows: At first, Open Run by clicking: Windows button + R Then, copy and paste the following command there:

 chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

This will open the chrome browser in disabled security mode and you can overcome that Errors.

Thanks

Answer 6

You can create a virtual host with WAMP or an other web development platform.

With I have no problems.

Answer 7

run a http node server and serve the file.

1. Install connect and serve-static with NPM

   $ npm install connect serve-static

2. Create server.js file with this content:

   var connect = require('connect'); var serveStatic = require('serve-static'); connect().use(serveStatic(__dirname)).listen(8080, function(){ console.log('Server running on 8080'); });

3. Run with Node.js

   $ node server.js

You can now go to the file that is doing cross-origin request without any error by going: http://localhost:8080/yourfile.html