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
– charlietfl, Commented Feb 27, 2016 at 0:49
Uploading image of browser dev tools.. They don't tell me anything. just saying an error occurred trying to load the resource — Whitecat
– Whitecat, Commented Feb 27, 2016 at 0: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
– Whitecat, Commented Feb 27, 2016 at 0:51
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
– charlietfl, Commented Feb 27, 2016 at 0:57

Shankar Gurav · Accepted Answer · 2016-03-01 17:56:55Z

1

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.

answered Mar 1, 2016 at 17:56

Shankar Gurav

1,0779 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to debug $http method in angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related