Не удается получить JSON с удаленного сервера с помощью AngularJS $ http.json / get

Question

Не удается получить JSON с удаленного сервера с помощью AngularJS $ http.json / get

У меня есть реальная проблема с получением удаленного файла JSON с помощью AngularJS с удаленного сервера, и даже когда я его получаю, я не могу найти способ использования данных.

Вот угловой код:

 var artistControllers = angular.module('artistControllers', ['ngAnimate']);

artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.json('http://remotehost.mobi/temp.json').
success(function(data){
console.log('success');
console.log(data);
}).
error(function(data, status ){
console.log('error');
console.log('status');

});
}]);

Обычно я получаю только все типы ошибок:

при попытке получить динамический JSON из сценария PHP, мне нужно отправить
обратный вызов, который иногда работает, но обратный вызов запускает функцию
что выходит за рамки, так что это не имеет отношения к моим потребностям.
при попытке загрузить JSON из файла .json (как в примере) я получаю
ошибки.
при использовании $ http.get я всегда получаю междоменную безопасность
сообщение.

Я ищу способ загрузки данных json с удаленного сервера, динамически генерируемого PHP, с угловым JS-контроллером и использования его внутри этого контроллера.

Спасибо

2

angularjs json jsonp php

Решение

Другие решения

Пример прокси, который включает CORS: corsproxy.com

CORE безопаснее, чем jsonp, потому что у него нет способа выполнить код JavaScript. С положительной стороны вы получаете больший контроль над изменением состояния / тайм-аутом / прогрессом и прерыванием беременности с помощью CORS, так как теперь это ajax

Единственный риск сейчас заключается в том, что вы доверяете corsproxy.com для чтения данных, которые передаются через & обновление?

Единственное, что вам нужно сделать, это заменить http:// с http://www.corsproxy.com/ (не думаю, что это работает для https …)

var artistControllers = angular.module('artistControllers', ['ngAnimate']);

artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.json('http://www.corsproxy.com/kinneret.mobi/temp.json').
success(function(data){
console.log('success');
console.log(data);
}).
error(function(data, status ){
console.log('error');
console.log('status');
});
}]);

1

Спасибо за помощь. Я думаю, что моя проблема была немного другой, поэтому я публикую это решение.

Очевидно, я добавил новый заголовок, чтобы разрешить перекрестное происхождение моего PHP, который динамически генерирует код JSON:

header('Access-Control-Allow-Origin: *');
header('content-type: application/json; charset=utf-8');

Это происходит прямо перед кодированием функции и возвращает json. Еще одна вещь, которую я добавил, — это форматирование JSON перед отправкой обратно. Я обнаружил, что отправка «сырого» неформатированного JSON назад вызывает неожиданные проблемы. Начиная с PHP 5.4 вы можете добавить JSON_PRETTY_PRINT в json_encode:

echo  json_encode($data_array, JSON_PRETTY_PRINT);

В угловом коде я проверил много комбинаций, включая @Endless, предложение использовать corsproxy.com, но обнаружил, что после этих настроек вы можете просто использовать $http.get ,

Надеюсь, это поможет, если кто-то столкнется со странными проблемами с этой междоменной политикой.

1

Источник

Accepted Answer

Вам нужно изменить сервер, чтобы разрешить CORS (см. этот) или использовать $http.jsonp и измените ответ на формат JSONP (тело JSON обернуто в вызов функции обратного вызова).

Если вы не управляете удаленным сервером, вы можете прокси-запрос через свой собственный сервер, чтобы он больше не был междоменным.

3