CODEWITHSUNDEEP
javascriptangularjshttp
Whitecat
Whitecat

Reputation: 4020

How to debug $http method in angularjs

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

Upvotes: 1

Views: 2489

Answers (1)

Shankar Gurav
Shankar Gurav

Reputation: 1067

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.

Upvotes: 1

Related Questions