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.getIt

Solution 1:

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

Solution 2:

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.

Solution 3:

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

Solution 4:

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)