Cannot read property 'protocol' of undefined

Issue

Getting that error in console when trying to get data from a API. Anybody have this issue before?

var url = "https://api.website.com/get/?type=events&lat=" + localStorage.getItem('latitude')
+ "&lng=" + localStorage.getItem('longitude') + "&distance=50";

$http({
    headers: {
        'Content-type': 'application/json'
    }
})

$http.get(url).success(function (events) {
    $scope.events = events;
});

error:

TypeError: Cannot read property 'protocol' of undefined
at Gb (http://localhost:38772/www/js/plugins/angular.min.js:114:238)
at s (http://localhost:38772/www/js/plugins/angular.min.js:65:249)
at new EventsController (http://localhost:38772/www/js/angular.js:4:5)
at d (http://localhost:38772/www/js/plugins/angular.min.js:30:452)
at Object.instantiate (http://localhost:38772/www/js/plugins/angular.min.js:31:80)
at http://localhost:38772/www/js/plugins/angular.min.js:61:486
at http://localhost:38772/www/js/plugins/angular.min.js:49:14
at q (http://localhost:38772/www/js/plugins/angular.min.js:7:380)
at E (http://localhost:38772/www/js/plugins/angular.min.js:48:382)
at f (http://localhost:38772/www/js/plugins/angular.min.js:42:399) 

Solution

You're issuing a malformed $http request.

You are not supposed to set your headers in a separate call to $http. Call to $http() will actually issue the request, but since you configured it with just the header (no url or method), it throws that error at you (as expected).

If you want to set your header you'll want to do that by passing a custom config object as a second parameter to your $http.get() call:

$http.get(url, {
  headers: {
    'Content-type': 'application/json'
  }
}).success(function (events) {
  $scope.events = events;
});

Answered By - Stewie