AngularJS $http.get сообщает об ошибке XMLHttpRequest

Я пытаюсь научиться использовать запросы $http.get в AngularJS для веб-приложения, которое я пишу. У меня есть локально размещенный сервер, у которого есть некоторый API, который я написал. Когда я пытаюсь запустить свою страницу Angular, я вижу в консоли моего сервера, что GET-запрос выполнен, но в браузере ничего не загружается. После проверки консоли браузера я нахожу это сообщение об ошибке:

XMLHttpRequest cannot load http://127.0.0.1:8080/api/range/?nmax=5&a_max=100&b_max=200, No 'Access-Control-Allow-Origin' header is print on the requested resource. Origin 'null' is therefore not allowed access.

На стороне сервера я использую сервер Python CherryPy, который принимает запрос GET по указанному выше URL-адресу и возвращает строку JSON, которая выглядит примерно так:

[
    {
        "a": 5.6,
        "b": 3.2
    },
    {
        "a": 4.3,
        "b": 2.6
    }
]

Вот мой угловой код, на данный момент он настолько прост, насколько это возможно:

<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="Ctrl"> 

<ul>
  <li ng-repeat="x in peakdata">
    {{ x.a + ', ' + x.b }}
  </li>
</ul>

</div>

<script>
var myApp = angular.module('myApp', []);

myApp.controller('Ctrl', function($scope, $http) {
  $http.get('http://127.0.0.1:1234/api/range/?nmax=5&a_max=100&b_max=200')
    .then(function(response){
      $scope.peakdata = response.data;
    }, function(err) {
      throw err;
    });
});
</script>

</body>
</html>

Любые советы будут высоко ценится!

Спасибо, Шон.

Редактировать: Оказывается, мне пришлось внести изменения как в мой код AngularJS, так и в мой скрипт CherryPy. Смотрите мой ответ для более подробной информации.

Источник

2 ответа

Решение

После небольшого дальнейшего изучения и возни я наконец пришел к решению. Мне нужно было включить CORS мое приложение AngularJS. Достаточно следующего кода:

myApp.config(function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
});

В большинстве случаев их проблемы на этом закончились бы. Однако, так как я использую свой собственный сервер CherryPy, у меня было немного больше дел. Мне пришлось включить CORS в моем скрипте CherryPy Python. Эти вопросы / ответы здесь являются хорошими ресурсами для этого:

Ошибка "отсутствует заголовок Access-Control-Allow-Origin" присутствует с Cherrypy

Вишня / JQuery CORS неприятности

Для тех, кто интересуется, что на самом деле означает "CORS", это означает "Обмен ресурсами между источниками". Страницу Википедии приятно читать: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

Источник

Я полагаю, что на этот предыдущий вопрос может быть ответ, который вы ищете: Access-Control-Allow-Origin не разрешен.

Это проблема, которая возникает, когда вы делаете что-то локально, поэтому я не думаю, что вы неправильно используете Angular:)

Источник
Другие вопросы по тегам