Ionic 3, не может просматривать результат с сервера API [duplicate]

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

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

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

Используйте это расширение для хром. Позволяет запрашивать любой сайт с ajax из любого источника. Добавляет к ответу 'Allow-Control-Allow-Origin: *' header

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

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

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

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

web.api

config.EnableCors();

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

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

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

Это проблема CORS . Есть некоторые настройки, которые вы можете изменить в угловом - это те, которые я обычно устанавливаю в методе 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.

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

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

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);
    });
  }
}]);

в ' http: // mywebservice ' должен быть необходим параметр обратного вызова, который возвращает 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!"}

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

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

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

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

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

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

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

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

6) Нажмите Ok-> Next-> Finish и создаст ярлык google на вашем рабочем столе

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

8 ) Нажмите свойства

9) Введите это в целевой путь

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

10) Сохраните его

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

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

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

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

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

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

Я получил

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

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

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