Could not load data from remote json

Question

I am builiding hybrid app with angularjs and i am trying to call the service from external source. but when i make a call to url i am getting error

XMLHttpRequest cannot load https:XXXX/xxx.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

here is my code

app.controller('overview', function($scope, $http) {
    $http({
        method : "GET",
        url : "https://ysaf.XXXX.yourcxxxxx/resource.json"
    }).then(function appSucces(response) {
        $scope.resources = response.data;
    }, function appError(response) {
        $scope.resources = response.statusText;
    });
});

if i call the local .json file i am not getting any error but, only when i call the external api, i am getting this error.

is there anything i am doing wrong in this code?

you will need to make changes to the service code to allow cross-origin requests. If that is not possible, then you can call the service from your own server (which would not have any cross origin issues) and then serve the json to your app from your server — gaurav5430, Dec 21 '16 at 07:41
this should be handle on server side but you could try this one http://stackoverflow.com/a/33662315/5621827 on your side — jitender, Dec 21 '16 at 07:42
Possible duplicate of [How does Access-Control-Allow-Origin header work?](http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work) — Debug Diva, Dec 21 '16 at 08:19

score 0 · Answer 1 · answered Dec 21 '16 at 07:41

Access-Control-Allow-Origin is set on the response from server, this is not on client request to allow clients from different origins to have access to the response.

In this case, https://ysaf.XXXX.yourcxxxxx/resource.json does not allow your origin to have access to the response. Therefore you cannot read it.

Clement Amarnath · Answer 2 · 2016-12-21T07:52:39.297

0

Add the neccessary headers such as Access-Control-Allow-Origin: *.

The issue which you are facing is CORS issue. CORS - Cross Origin Resource Sharing.

CORS issue will occur on following cases

1) If we are abc.com and accessing xyz.com (different domain)

2) If we are in http://localhost:8080/myapplication and accessing http://localhost:9080/anotherapplication (different ports)

edited Dec 21 '16 at 07:52

answered Dec 21 '16 at 07:42

Clement Amarnath

5,301
1
21
34

score 0 · Answer 3 · answered Dec 21 '16 at 09:25

You should download this extension for your development :

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

It will solve all Access-Control-Allow-Originproblems :)

Don't forget to disable it when you stop dev, it could be a problem for web navigation.

Could not load data from remote json

3 Answers3