无法读取未定义的属性“协议”

Question

尝试从 API 获取数据时在控制台中收到该错误。有人以前遇到过这个问题吗？

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

错误：

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) 

Answer 1

您正在发出格式错误的 $http 请求。

您不应该在单独的

$http

调用中设置标题。调用

$http()

实际上会发出请求，但由于您仅使用标头（没有 url 或方法）配置了它，因此它会向您抛出该错误（如预期）。

如果您想设置标头，您需要将自定义配置对象作为第二个参数传递给您的

$http.get()

调用：

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

Answer 2

当请求出现问题时，例如，会发生此错误。如果您将 url 设置为未定义、无效方法或无效内容类型，则请求对象的任何错误都会抛出此错误。

Answer 3

从 React 调用 API 时遇到同样的问题。 检查我的代码后，我发现无法找到环境文件中的端点，这导致了错误。

我所做的就是停止并重新启动反应应用程序

Answer 4

在 vue 2 项目中，如果您使用

axios

并遇到此错误，请尝试此解决方案。

• 从

  https://www.npmjs.com/package/vue-axios

  安装 vue-axios
• 这样使用

  vue-axios

  可以消除协议错误

• import Vue from 'vue'

• import axios from 'axios'

• import VueAxios from 'vue-axios'

  //此行对于删除 'protocol' ERROR 非常重要

• Vue.use(VueAxios, axios)

Answer 5

我的问题是，我的项目中有一个名为 AXIOS.JS 的文件，我从那里导入到其他文件中，这确实使系统感到困惑，因此禁止给出项目中模块的文件名