I'm just starting to learn some programming and I'm reading Pro AngularJS by Adam Freeman.Following one of the examples the authors shows in the book I created my own. I have a Xampp server and the the data is in Deployd. Both servers are in a Virtual XP machine (VMWare). The data (http://192.168.1.40:5500/cars) looks like this:
[{
"brand": "Honda",
"color": "Blue",
"price": 20000,
"year": 2010,
"id": "95d78d0090f3ab62"
}, {
"brand": "Kia",
"color": "Green",
"price": 10000,
"year": 2013,
"id": "47e180e828b2297a"
}, {
"brand": "Toyota",
"color": "Black",
"price": 22000,
"year": 2013,
"id": "19ab0a96f80c29ab"
}, {
"brand": "Buick",
"color": "Silver",
"price": 25000,
"year": 2012,
"id": "a9a217f2a7381994"
}, {
"brand": "Ferrari",
"color": "Red",
"price": 250000,
"year": 2014,
"id": "0abb8a0179f95a17"
}, {
"brand": "Porche",
"color": "Blue",
"price": 60000,
"year": 2012,
"id": "f76556eb6aa7981e"
}]
I don't have any issues accessing the data entering the URL in the browser.
The relevant HTML looks like this:
<tr ng-repeat="item in data | orderBy:'brand' ">
<td>{{item.brand}}</td>
<td>{{item.color}}</td>
<td>{{item.year}}</td>
<td>{{item.price | currency}}</td>
</tr>
And my AngularJS code looks like this:
angular.module("demo")
.constant("dataUrl", "http://192.168.1.40:5500/cars")
.controller("demoCtrl", function ($scope, $http, dataUrl) {
//$http.defaults.useXDomain = true;
$scope.data = {};
$http.get(dataUrl)
.success(function (data) {
$scope.data = data;
})
.error(function (error) {
$scope.data.error = error;
});
});
This is the issue I'm having. When I access the page in IE9 it works perfectly. When I use FireFox nothing shows, and no errors or nothing at all. In Chrome the data doesn't load and it gives me this error:
XMLHttpRequest cannot load http://192.168.1.40:5500/cars. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.1.40' is therefore not allowed access.
As I mentioned I'm very new on this, and it is very puzzling for me that it works in IE and not in the rest of the browsers. I also tried the same code using a "json" file instead of Deployd data and it works in all the browsers. Any idea what should I do here? Thanks!
Page in IE9
