How to debug $http method in angularjs

Question

I am running an angularjs app and I am having trouble finding out why my $http call is failing.

I type the url into the browser I always get a response. But when I make there url request through $http it fails.

My code is:

.controller('StopDetailCtrl', function($scope, $http) {
    $scope.info = fetch();

  function fetch(){
        //This url works
        // var uriBuilder = 'http://cors-test.appspot.com/test'
        //This url doesn't
        var uriBuilder = 'http://api.translink.ca/rttiapi/v1/stops/55612?apikey=u8RWYB3HmxjsHenpDk0u'

    $http({
          method: 'GET',
          url: uriBuilder
        }).then(function successCallback(response) {
          console.log('Success', JSON.stringify(response));
        }, function errorCallback(response) {
          console.log('Error', JSON.stringify(response));
        });
    }
})

The error I keep getting back is a json string which is not informative.

{
  "data": null,
  "status": 0,
  "config": {
    "method": "GET",
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "url": "http:\/\/api.translink.ca\/rttiapi\/v1\/stops\/55612?apikey=u8RWYB3HmxjsHenpDk0u",
    "headers": {
      "Accept": "application\/json, text\/plain, *\/*"
    }
  },
  "statusText": ""
}

Is there something I am missing in the $http request?

The api I am using is: https://developer.translink.ca/ServicesRtti/ApiReference

Inspect the actual request itself in browser dev tools network for clues — charlietfl, Feb 27 '16 at 00:49
Uploading image of browser dev tools.. They don't tell me anything. just saying `an error occurred trying to load the resource` — Whitecat, Feb 27 '16 at 00:50
arg... I got dev error now `XMLHttpRequest cannot load http://api.translink.ca/rttiapi/v1/stops/55612?apikey=u8RWYB3HmxjsHenpDk0u. Origin http://localhost:8100 is not allowed by Access-Control-Allow-Origin.` — Whitecat, Feb 27 '16 at 00:51
That's CORS error. API is not CORS enabled. See if it serves jsonp or use a proxy — charlietfl, Feb 27 '16 at 00:52
The url you specified in example returns xml instead of json.. — Hardy, Feb 27 '16 at 00:54
@charlietfl jsonp works. but how do I specify `accept: application/JSON` in the header an xml is being returned. — Whitecat, Feb 27 '16 at 00:56
unless api serves jsonp (JSON w/padding) it doesn't do you any good. If it does, you need to use `$http.jsonp` and included callback string...see docs — charlietfl, Feb 27 '16 at 00:57
The call back string does not work. I put `headers: {'Accept': 'application/JSON'}` but the request header that is sent is `accept: */*` — Whitecat, Feb 27 '16 at 01:26
You can't send headers with jsonp...it is actually a script request. Use a proxy on your server or third party proxy service like Yahoo YQL — charlietfl, Feb 27 '16 at 01:28
Am I correct in assuming that the only way to do the request is using a proxy as the only way to get a json response is by putting in the header `{'Accept': 'application/JSON'}` — Whitecat, Feb 27 '16 at 01:30
See [How to enable CORS in AngularJs](http://stackoverflow.com/a/23824093/5535245). — georgeawg, Feb 27 '16 at 05:07

score 1 · Accepted Answer · answered Mar 01 '16 at 17:56

You are trying to make CORS request. Adding CORS support to your application requires coordination between both the source server and client. You can create CORS request as described in this post. I tested it.

As I said you need to change server respose as well. So you need support from translink and translink' server API response must include Access-Control-Allow-Origin header. If this header is not present in response, the CORS request will fail.

I gone through this TransLink Developer's topic where they have clearly mentioned that,

"For security reasons, changing the Access-Control-Allow-Origin header will expose the API key. For this reason we will not be making any changes at this point."

So probably CORS request to the TransLink in not feasible unless they add the API support.

How to debug $http method in angularjs

1 Answers1