Как извлечь данные JSON из запроса Angular для доступа к ресурсам другого домена?

Question

У меня странная проблема, над которой я работал пару дней.Проблема связана с перекрестным распределением ресурсов (CORS), я делаю запрос Angular GET и могу видеть в инструментах разработчика Firefox / Chrome, что тело ответа JSON получено, однако JavaScript (или браузер, илисервер) отказывается передать мне тело ответа.Вот мой запрос:

$http = angular.injector(["ng"]).get("$http"); //angular http object
 $http = angular.injector(["ng"]).get("$http"); 
    $http({
      method: 'GET',
      url: 'api.example.com/myPath',
      headers: {
        'Content-Type': 'application/json',

      }
    }).then(function successCallback(response) {
  
      alert("succeed: db "+JSON.stringify(response)); //this is not called
    

    }, function errorCallback(response) {
      alert("failed: " + JSON.stringify(response));//this is called
    });

Как уже упоминалось в комментариях, функция сбоя называется не успехом.Я могу упомянуть / опубликовать переполнение стека и другие ссылки, на которые я был здесь, но их около 50, поэтому вот некоторые из них:

1. SO 1
2. SO 2
3. SO 3
4. SO 4
5. SO 5
6. Reddit 1
7. SO 6
8. GitHub 1

Заголовки, которые я пробовал (помимо того, что показано в коде):

"headers": {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Origin': '*'
      }


"headers": {
        'Content-Type': 'application/json',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Origin': '*'
      }

"headers": {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Origin': '*'
      }


"headers": {
        'Accept': 'application/json',
        'Access-Control-Allow-Headers': 'Content-Type',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Origin': '*'
      }


"headers": {
        'Accept': 'application/json',
        'Access-Control-Allow-Origin': '*'
      }

Пробовал все вышеперечисленное, некоторые из них не получат JSON-ответ, вместо Send OPTIONSзапрос и остановка.

Вот как выглядит выход Firefox:

Сеть

Консоль

А вот вывод функции Alert:

failed: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"api.example.com/myPath","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"","xhrStatus":"error"}

Другие вещи, которые я пробовал: Установка плагина для Chrome с именем CORS: Не работала вообще, без разницы

Примечание Сервер конечных точек - это не NodeJS, это Java, большинство ответов пришло across online предлагает добавить эти заголовки на сервер , но мои коллеги настаивают , что эту проблему можно решить с помощью внешнего интерфейса Angular (особенно после того, как они увидели, что правильная информация тела Json ответана самом деле приходит с сервера, как показано на рисунках в приложении)

Answer 1

Попробуйте это

$http.get('api.example.com/myPath').then(
  function(res){ 
    alert('success')
    },
   function(err){
     alert(err)
  })

Answer 2

Оказалось, что нет исправлений только из внешнего интерфейса, браузер возвращает мне данные ответов JSON только после того, как конечная точка Java добавила заголовки ответов, в NodeJS у меня это работало нормально раньше со следующим дополнением:

 request(options, function(err, response, body) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.json(response);
  })

Я не уверен, как это делается в Java, но это в основном то, что они сделали, просто добавили эти вещи в Web-сервис Java.Это похоже на то, как сервер Java (хотя и отправлял ответ JSON браузеру) говорил браузеру («Не передавайте ему данные, потому что у меня нет таких инструкций с моей стороны»).Я думаю, это немного смешно, но так оно и было.

Answer 3

Если вы используете версию Angularjs> = 1.4, сделайте это так (обратите внимание на улов)

$http({
  method: 'GET',
  url: 'api.example.com/myPath',
  headers: {
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json'
  }
}).then(function(response) {
  alert("succeed: db "+JSON.stringify(response)); //this is not called

}).catch(function(response) {
  alert("failed: " + JSON.stringify(response));//this is called
});