XMLHttpRequest cannot load in angularjs

Question

I am learning from this site.

I use this for an Android application to fetch the PHP data and show the application.

When I start the web service in AngularJS, Google Chrome gives this error in the console:

XMLHttpRequest cannot load http://192.168.1.10/android_connect/JsonReturn.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

This is my JavaScript code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script>function GetUsers($scope, $http) {
    // this is where the JSON from api.php is consumed
    $http.get('http://192.168.1.10/android_connect/JsonReturn.php').
        success(function(data) {
            // here the data from the api is assigned to a variable named users
            $scope.users = data;
        });
}</script>

Then I set the HTML code:

<div ng-controller="GetUsers">

<table>
<thead><tr><th>ID</th><th>Name</th><th>Email</th></tr></thead>
<tbody>
<tr ng-repeat="user in users"><td>{{user.id}}</td><td>{{ user.name }}</td><td>{{user.email}}</td></tr>
</tbody>
</tfoot></tfoot>
</table>

</div>

I tried all the possible solutions posted, but it doesn't seem to fix the issue in my code.

I think the error is pretty much self explanatory No 'Access-Control-Allow-Origin' header is present on the requested resource. Access-Control-Allow-Origin should be in your header — ilgaar
– ilgaar, Commented Jan 17, 2015 at 14:27

jrossi · Accepted Answer · 2015-01-17 14:44:37Z

3

You are trying to make a cross domain request using XMLHttpRequest. For that to work, the web server responding to the request needs to have the Access-Control-Allow-Origin response header set to *.

answered Jan 17, 2015 at 14:44

jrossi

1963 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arvind Over a year ago

Add this header('Access-Control-Allow-Origin: *'); in your JsonReturn.php

PhiLho · Accepted Answer · 2015-09-09 13:48:59Z

0

Alternatively, serve the Angular page from the same server than hosting your API. Then you don't have a cross-domain request.

answered Sep 9, 2015 at 13:48

PhiLho

41.3k6 gold badges100 silver badges136 bronze badges

Collectives™ on Stack Overflow

XMLHttpRequest cannot load in angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related