Not able to get response from API through angular?

Question

My code is as below

$scope.LoadSearchResults = function () {
        $scope.hotels = '';
        $scope.allData = '';
        var mydata = '';
        $http({
            url: 'myurl',
            Authorization : 'code',
            method: 'POST',
            header: { 'Content-type': 'text/json' }
        })
        .success(function (mydata) {
           $scope.hotels = JSON.parse(JSON.stringify(mydata.SearchResponse.Hotels.Hotel));
           $scope.allData = JSON.parse(JSON.stringify(mydata.SearchResponse.Hotels.Hotel));

           $scope.AllLocality($scope.allData);
        })
        .error(function (mydata) {
            $scope.hotels = "Failed";
            console.log(JSON.stringify(mydata));
        });        
    }

and getting error is "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://example.com/some-page. (Reason: CORS header 'Access-Control-Allow-Origin' missing)."

How could I solve this problem?

http://stackoverflow.com/questions/34198974/cross-domain-request-using-angularjs/34199074#34199074 — Simone Zandara, Dec 12 '15 at 09:22

gru · Answer 1 · 2015-12-16T11:20:59.343

this is not an Angular problem.

the reason is you are firing a cross origin request (e.g. your app sits on a domain and the request specified by url: 'myurl' is for a different domain) and HTTP does not allow it unless permissions are specifically added by the server receiving the request by adding a CORS header to the response.

to solve your problem you please check here one of the 4 options (I am sure you can find more depending on your specific setup):

make your app fire the request to the same domain, which is normally the preferred and most secure approach (e.g. the web app hosting the angular code is also responsible of responding to the xhr you are doing via $http)
if you have control on how the server creates the response, it should be fairly easy to add such headers (I cannot add an example here as it is entirely dependent on the web server or application gateway you are using)
if you don't have control over the server response (and most importantly its headers) you can add your own server in the middle that would act as a request proxy, thus making your JS app firing the request to your server (not incurring CORS problems) and the server itself making the proxy request to the 3rd party provider
if you just need GET requests (which doesn't seem the case from your snippet) you can use angular's $http JSONP if the server supports this type of requests.

Hi Gru, thanks for your response. Since I have no access to the server, I am not sure about server response. Is there any other solution for this? am trying following code too...$http({ method: "Post", url: $rootScope.ServiceBaseUri + "ControllerName/Function", data: { Email: Email }, datatype: "json" }).success(function (res) { accesstoken = res.MESSAGE; }) — Samy, Dec 15 '15 at 16:06
hey @Samy I've just edited my answer with a couple of other options. n.3 would probably be the safest if you really need to make cross-domain requests, but involves a bit of extra (backend) coding — gru, Dec 16 '15 at 11:22

score 0 · Answer 2 · edited Nov 08 '19 at 05:21

Hi I have got it same issue but now i have resolved it by using below:

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");

please pass header on controller after parent::__construct();

Not able to get response from API through angular?

2 Answers2