반응형
정의되지 않은 'protocol' 속성을 읽을 수 없습니다.
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)
잘못된 형식의 $http 요청을 발행하고 있습니다.
헤더를 다른 콜로 설정하면 안 됩니다.$http
문의처:$http()
는 실제로 요구를 발행합니다만, 헤더(url 또는 메서드 없음)만으로 설정했기 때문에, 그 에러가 (예상대로) 송신됩니다.
헤더를 설정하는 경우는 커스텀 설정 오브젝트를 두 번째 파라미터로 전달함으로써 설정합니다.$http.get()
호출:
$http.get(url, {
headers: {
'Content-type': 'application/json'
}
}).success(function (events) {
$scope.events = events;
});
이 오류는 url을 정의되지 않음, 잘못된 메서드 또는 잘못된 콘텐츠 유형으로 설정한 경우 요청 개체에 문제가 있을 경우 이 오류가 발생합니다.
react에서 API를 호출하는 동일한 문제가 발생하였습니다.코드를 확인한 결과 환경파일의 엔드포인트를 찾을 수 없어 오류가 발생하였습니다.
리액션 앱을 정지하고 재시작하는 것만으로 해결했습니다.
vue 2 프로젝트에서는axios
이 에러에 직면했을 경우는, 이 솔루션을 사용해 주세요.
- 설치하다
vue-axios
https://www.npmjs.com/package/vue-axios 에서 - 사용하다
vue-axios
이 방법으로 프로토콜 오류를 제거합니다. import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
//이 행은 'protocol' 오류를 제거하는 데 중요합니다.Vue.use(VueAxios, axios)
언급URL : https://stackoverflow.com/questions/21347542/cannot-read-property-protocol-of-undefined
반응형
'source' 카테고리의 다른 글
스프링 부트 응용 프로그램을 재시작하지 않고 런타임에서 로그 수준을 변경하는 방법 (0) | 2023.04.02 |
---|---|
WooCommerce 디스플레이 구매 품목만 (0) | 2023.04.02 |
사용 불가능한 필드 집합 내에서 버튼 하나를 사용 가능으로 설정하는 방법 (0) | 2023.04.02 |
AngularJs에서 ng-repeat을 X회만 반복합니다. (0) | 2023.04.02 |
리액트 후크: 빈 배열을 인수로 사용해도 useEffect()가 두 번 호출됩니다. (0) | 2023.04.02 |