CODEWITHSUNDEEP
javascriptajaxangularjs
user2901304
user2901304

Reputation: 713

Cannot read property 'protocol' of undefined

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)

Upvotes: 49

Views: 104039

Answers (5)

MALI
MALI

Reputation: 1

The problem with me was that I had a file in the project that I called AXIOS.JS and I imported from there into other files and it really confused the system, therefore it is forbidden to give the file names of modules in the project

Upvotes: 0

msayubi76
msayubi76

Reputation: 1668

In vue 2 project if you're using axios and facing this error then try this solution.

  • Install vue-axios from https://www.npmjs.com/package/vue-axios
  • Use vue-axios in this way to remove protocol error
  • import Vue from 'vue'
  • import axios from 'axios'
  • import VueAxios from 'vue-axios' //this line is important to remove 'protocol' ERROR
  • Vue.use(VueAxios, axios)

Upvotes: 1

Leo Orotoma Ojigbo
Leo Orotoma Ojigbo

Reputation: 45

Got the same Issue calling an API from react. After checking my code I saw the endpoint from the environment file could not be found which led to the error.

All I did to fix it was to stop and restart the react app

Upvotes: 1

Laxmikant Dange
Laxmikant Dange

Reputation: 7688

This error occurs when something goes wrong in request, for ex. if you set url as undefined, invalid method, or invalid content type, anything wrong with request object will throw this error.

Upvotes: 27

Stewie
Stewie

Reputation: 60406

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;
});

Upvotes: 46

Related Questions