На запрошенном ресурсе AngularJS отсутствует заголовок «Access-Control-Allow-Origin»

Веб-магазин Chrome имеет расширение, которое добавляет заголовок "Access-Control-Allow-Origin" для вас, когда на странице есть асинхронный вызов, который пытается получить доступ к другому хосту, чем ваш.

Имя расширения: " Allow-Control-Allow-Origin: *", и это ссылка: https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

На стороне клиента вы можете включить запросы cors в AngularJS через

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

Однако, если это все еще возвращает ошибку, это означает, что сервер, который вы делаете запрос, должен разрешить запрос CORS и должен быть настроен для этого.

Это проблема CORS. Есть несколько настроек, которые вы можете изменить в angular - это те, которые я обычно устанавливаю в методе angular.config(не все связаны с CORS):

$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.withCredentials = true;
delete $httpProvider.defaults.headers.common["X-Requested-With"];
$httpProvider.defaults.headers.common["Accept"] = "application/json";
$httpProvider.defaults.headers.common["Content-Type"] = "application/json";

Вам также необходимо настроить свой веб-сервис - подробности этого будут зависеть от используемого вами языка на стороне сервера. Если вы используете инструмент сетевого мониторинга, вы увидите, что он сначала отправляет запрос OPTIONS. Ваш сервер должен ответить соответствующим образом, чтобы разрешить запрос CORS.

Причина, по которой он работает в вашем браузере, заключается в том, что он не делает запрос на перекрестный поиск, тогда как ваш код angular.

У меня есть решение ниже, и его работы для меня:

app.controller('LoginController', ['$http', '$scope', function ($scope, $http) {
$scope.login = function (credentials) {
$http({
        method: 'jsonp',
        url: 'http://mywebservice',
        params: {
            format: 'jsonp',
            callback: 'JSON_CALLBACK'
        }
    }).then(function (response) {
        alert(response.data);
    });
  }
}]);

in 'http://mywebservice' должен быть нужен параметр callback, который возвращает JSON_CALLBACK с данными.
Ниже приведен пример примера, который отлично работает

$scope.url = "https://angularjs.org/greet.php";
    $http({
        method: 'jsonp',
        url: $scope.url,
        params: {
            format: 'jsonp',
            name: 'Super Hero',
            callback: 'JSON_CALLBACK'
        }
    }).then(function (response) {
        alert(response.data);
    });

Пример вывода:

{"name":"Super Hero","salutation":"Apa khabar","greeting":"Apa khabar Super Hero!"}

Я добавил это, и это сработало для меня.

web.api

config.EnableCors();

Затем вы будете называть модель с помощью cors:

В контроллере вы добавите вверху для глобальной области или для каждого класса. Это зависит от вас.

 [EnableCorsAttribute("http://localhost:51003/", "*", "*")]

Кроме того, когда вы нажимаете эти данные на Angular, он хочет увидеть также файл .cshtml, или он будет толкать данные, но не заполнять ваше представление.

(function () {
    "use strict";
    angular.module('common.services',
        ['ngResource'])
    .constant('appSettings',
    {
        serverPath: "http://localhost:51003/About"
    });
}());

//Replace URL with the appropriate path from production server.

Я надеюсь, что это поможет кому-то, мне потребовалось некоторое время, чтобы понять Entity Framework, и почему CORS настолько полезен.

В моем случае я пытался попасть в службу WebAPI на localhost изнутри приложения MVC, которое использовало много кода Angular. Моя служба WebAPI отлично работала с Fiddler через http://localhost/myservice. Как только я потратил немного времени на то, чтобы настроить приложение MVC на использование IIS вместо IIS Express (часть Visual Studio), он работал нормально, не добавляя никакой конфигурации, связанной с CORS, в любую область.

Это проблема на стороне сервера. Вы должны добавить свой клиентский адрес к открытому API вашего сервера. Если вы используете работу фрейма Spring, вы можете аннотировать @CrossOrgin из org.springframework.web.bind.annotation.CrossOrigin;

Например: @CrossOrigin (originins = " http://localhost:8080" )

Замените get на jsonp:

 $http.jsonp('http://mywebservice').success(function ( data ) {
    alert(data);
    });
}

Используйте это расширение для хром. Позволяет запрашивать любой сайт с ajax из любого источника. Добавляет в ответ заголовок "Разрешить-Контроль-Разрешить-Происхождение: *"

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related

Я получил

Нет заголовка "Access-Control-Allow-Origin"

и проблема была в том, что я указывал URL. Я предоставлял URL-адрес без маршрута, например, https://misty-valley-1234.herokuapp.com/.

Когда я добавил путь, который он сработал, например, https://misty-valley-1234.herokuapp.com/messages. С запросами GET он работал в любом случае, но с ответами POST он работал только с добавленным путем.

Взгляните на эти обсуждения

Access-Control-Allow-Origin и Angular.js $http

http://forum.rejectedsoftware.com/groups/rejectedsoftware.vibed/thread/10500/

Если вы используете хром: попробуйте открыть chrome с помощью args, чтобы отключить веб-безопасность, как вы видите здесь:

Отключить такую ​​же политику происхождения в Chrome

Вот как это сработало для меня. Для пользователей Windows с помощью Bracket и AngularJS

1) Перейдите на рабочий стол

2) Щелкните правой кнопкой мыши на рабочем столе и найдите "NEW" в раскрывающемся диалоговом окне всплывающего окна, и оно будет расширяться

3) Выберите "Ярлык"

4) Откроется диалоговое окно

5) Нажмите "Обзор" и найдите Google Chrome.

6) Нажмите "ОК" - "Далее" - "Готово" и создаст ярлык Google на рабочем столе.

7) Теперь щелкните правой кнопкой мыши значок Google Chrome, который вы только что создали.

8) Свойства клика

9) Введите это в целевой маршрут

"C:\Program Files\Google\Chrome\Application\chrome.exe" --args --disable-web-security

10) Сохранить

11) Дважды щелкните по недавно созданному хромовому ярлыку и пройдите по ссылке в адресной строке, и он будет работать.