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

XMLHttpRequest cannot load http://mywebservice. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

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

<form name="LoginForm" ng-controller="LoginCtrl" ng-submit="init(username,password,country)">
    <label>Country</label><input type="text" ng-model="country"/><br/><br/>
    <label>UserName</label><input type="text" ng-model="username" /></br></br>
    <label>Password</label><input type="password" ng-model="password">
    </br>
    <button type="submit" >Login</button>
</form>

И контроллер формирует соответствующие js:

app.controller('LoginController', ['$http', '$scope', function ($scope, $http) {
    $scope.login = function (credentials) {
    $http.get('http://mywebservice').success(function ( data ) {
        alert(data);
        });
    }
}]);

Веб-сервис отлично работает, когда я ударил его из строки URL. Как решить проблему? Пожалуйста, помогите!

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

Это проблема 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.

Ответ 4

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

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!"}

Ответ 5

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

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 настолько полезен.

Ответ 6

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

Ответ 8

Я получил

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

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

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

Ответ 10

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

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

Ответ 11

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

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

Ответ 13

Вот как это сработало для меня. Для пользователей 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) Дважды щелкните по недавно созданному хромовому ярлыку и пройдите по ссылке в адресной строке, и он будет работать.