Angular JS - HTTP GET request throws error

Question

I am very new to Angular JS and the Ionic application. I have tried to fetch the json data from the url . But, unfortunately I could not get any response. Instead, I get the error as shown in the screen below

I have tried in two ways,

Try 1:

 function(){
            return $http.get("url?subjStudyId=441",{'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}).then(function(response){

                chats = response.data;
                alert(JSON.stringify(chats));
                return chats;

            },function(err) {
             alert(JSON.stringify(err));
  })
        }

Try 2:

function($http) {
 var chats = [];
  return {
        all: function(){
            return $http.get("url?subjStudyId=441").then(function(response){

                chats = response.data;
                alert(JSON.stringify(chats));
                return chats;

            },function(err) {
             alert(JSON.stringify(err));
  })
        }
    }

Please help me finding the solution .

What language are you using for your backend, Java? – Dayan Aug 24 '15 at 19:34 — Dayan, Aug 24 '15 at 19:34

score 1 · Accepted Answer · edited May 23 '17 at 12:06

Your problem may be CORS which stands for Cross-Origin Resource Sharing take a look at this in-depth CORS article here.

Enable CORS on your backend and try to do the request again. You can also make use of JSONP by enabling that on the backend then doing

$http.jsonp('url?callback=JSON_CALLBACK&param=value);

JSONP stands for "JSON with Padding" (and JSON stands for JavaScript Object Notation), is a way to get data from another domain that bypasses CORS (Cross Origin Resource Sharing) rules. CORS is a set of "rules," about transferring data between sites that have a different domain name from the client.

I coded up two examples, one using $http.get and the other $http.jsonp, neither work which tells me that you don't have Access-Control-Allow-Origin "*" in your server nor do you have JSONP support setup. Head over to enable-cors.org, they got nice articles to help you get CORS setup on your backend.

Technically, you should stick to CORS, since JSONP is more of a security concern. So if nothing is stopping you from just enabling CORS then stick to that.

Example of doing a standard $http.get and $http.jsonp requests via the use of promises.

var app = angular.module("MyApp", []);

app.controller("MyCtrl", function($scope, $http){

  $scope.data = "";

  $scope.normalCall = function(){

  var results = $http.get('http://202.133.56.91:8081/SD_BIO/app/retrievenotifications.action?subjStudyId=441')
  .then(function(response){
      $scope.data = response;
  }, function(error){
      $scope.data = error; 
  });
  
  return results;
  };
  

 $scope.jsonPCall = function(){
        
 var results =$http.jsonp("http://202.133.56.91:8081/SD_BIO/app/retrievenotifications.action?callback=JSON_CALLBACK")
    
  .then(function(response){
      $scope.data = response;
  }, function(error){
      $scope.data = error;  
  });
  
  return results;
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="MyApp">
  <div ng-controller="MyCtrl">
    <button ng-click="normalCall()">Original Call</button> | 
      <button ng-click="jsonPCall()">JSONP Call</button>
     <br><br>
     <div ng-model="data">{{data}}</div>
  </div>
</div>

Currently , another development team is taking care of backend . I have intimated to them to enable CORS . In the meantime , I tried $http.jsonp("url?callback=json_callback&subjStudyId=441") . But unfortunately still I face the same issue .please help me on this Dayan — Rakesh L, Aug 25 '15 at 08:23
There is not much you can do besides talking to the team handling the server side and explaining to them that CORS needs to be enabled in order for your JS to successfully communicate. jsonp is not working because is not setup on the server either. — Dayan, Aug 25 '15 at 08:30
@RakeshL Please accept the answer if it helped you solve the problem. — Dayan, Aug 27 '15 at 18:04

score -1 · Answer 2 · answered Aug 24 '15 at 18:37

-1

You need to specify the url you are going to do the GET

url?subjStudyId=441

isn't a url, it needs to be something like -> someurl.com/?subjStudyId=441 where the -> ? is the query start and the -> = is the value you are

answered Aug 24 '15 at 18:37

Quaggie

65
7

url is a global var that holds the full url. You can tell because a request was made and error generated with full url... – Dayan Aug 24 '15 at 18:56

Angular JS - HTTP GET request throws error

2 Answers2