javascript - XMLHttpRequest cannot load in angularjs - Stack Overflow

admin管理员组

文章数量:1392007

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=".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 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./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.

• javascript
• php
• angularjs
• google-chrome
• xmlhttprequest

Share Improve this question Follow edited Feb 2, 2015 at 6:44 skrrgwasme 9,6331212 gold badges5757 silver badges8787 bronze badges asked Jan 17, 2015 at 13:58 Deepak AcharyaDeepak Acharya 9311 gold badge11 silver badge1616 bronze badges 2

• 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 Commented Jan 17, 2015 at 14:27
• i am add this but not working – Deepak Acharya Commented Jan 18, 2015 at 18:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 *.

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

本文标签： javascriptXMLHttpRequest cannot load in angularjsStack Overflow