AngularJS CORS Issues

Question

Я искал более 200 сайтов (возможно, преувеличивая, но не сильно) о том, как можно обрабатывать корсы с угловыми. У нас есть локальная машина, на которой запущен сервер веб-API. Мы разрабатываем клиент, который вызывает API для данных. При запуске клиента с сервера мы получаем данные без проблем. Когда мы запускаем его из другого домена, мы получаем красный ответ 200 при попытке получить данные и пустой ответ. Вот код:

var myApp = angular.module('Project', ['ngResource']); 

myApp.config(function($routeProvider){ 
    $routeProvider. 
     when('/new', {templateUrl:'templates/new.html', controller:'EditProjectController'}). 
     when('/mobile', {templateUrl:'templates/mobile.html', controller:'ProjectController'}). 
     when('/it', {templateUrl:'templates/it.html', controller:'ProjectController'}). 
     when('/writing', {templateUrl:'templates/writing.html', controller:'ProjectController'}). 
     when('/all', { templateUrl: 'templates/all.html' }). 
     when('/login', { templateUrl: 'partials/_login.html' }). 
     otherwise({ redirectTo: '/all' }); 
}); 
myApp.config(['$httpProvider', function ($httpProvider) { 
$httpProvider.defaults.useXDomain = true; 
delete $httpProvider.defaults.headers.common['X-Requested-With']; 
} 
]); 



myApp.controller('ProjectController', 
function myApp($scope, $http, projectDataService, userLoginService) { 
    $http.defaults.useXDomain = true; 
    $scope.loadProject = function(){ 
     projectDataService.getProject(function(project){ 
      $scope.project = project; 
      }) 


    }; 
    $scope.loadProject(); 
} 

); 

myApp.factory('projectDataService', function ($resource, $q) { 
var resource = $resource('http://webapiserver/api/:id', { id: '@id' }); 
return { 
    getProject: function() { 
     var deferred = $q.defer(); 
     resource.query({ id: 'project' }, 
      function (project) { 
       deferred.resolve(project); 
      }, 
      function (response) { 
       deferred.reject(response); 
      }); 

     return deferred.promise; 
    }, 
    save: function (project) { 
     var deferred = $q.defer(); 
     project.id = 'project/9'; 
     resource.save(project, 
      function (response) { deferred.resolve(response); }, 
      function (response) { deferred.reject(response); } 
      ); 
     return deferred.promise; 
    } 
}; 
}); 

Я также попытался это с помощью $ HTTP, но я получаю тот же ответ (или его отсутствие):

myApp.factory("projectDataService", function ($http) { 

return { 
    getProject: function (successcb) { 
     $http.get("http://webapiserver/api/project"). 
     success(function (data, status, headers, config) { 
      successcb(data); 
     }). 
     error(function (data, status, headers, config) { 

    } 
}; 
}); 

Когда я просто перейдите к URL, который обслуживает до json в браузере выплевывает данные. На сервере мы разрешаем перекрестное доменное происхождение, что видно из моего предыдущего утверждения. Как вы можете видеть, я реализую переопределения заголовков в myApp.config, я даже попытался поместить его прямо в мой контроллер ... нет разницы ...

3 дня сейчас по этой задаче.

Помогите с этим БОЛЬШЕ, чем оценено. Заранее спасибо.

Answer 1

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

Я использовал Sinatra для API, я не знаю, какой язык вы используете для своих веб-сервисов, но я думаю, вы можете применить его. В принципе, вам нужно настроить сервер для принятия вызовов CORS, определяя, какое происхождение и какие методы HTTP разрешены.

Вы сказали, что уже включили его на своем сервере, но что вы сделали точно?

Увидеть этот пост для более подробной информации: CORS with angular.js

Answer 2

Если ASP.NET WebAPI вам необходимо установить пакет CORS и инициализировать CORS в запуске веб-сервера.

Пакет называется Microsoft.OWin.Cors

В WebiApiConfig.cs положить в чем-то вроде:

var cors = new EnabledCorsAttribute("*", "*", "DataServiceVersion, MaxDataServiceVersion"); 
config.EnableCors(cors); 

Answer 3

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

Если для этого есть лучшее решение, то после многих дней работы над этой проблемой я не смог ее найти. Наконец, это то, что сработало для меня.

Успехов ...

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Http; 
using System.Web.Routing; 

namespace MashupCoreApiApi 
{ 
    public class WebApiApplication : System.Web.HttpApplication 
    { 
     protected void Application_Start() 
     { 
      GlobalConfiguration.Configure(WebApiConfig.Register); 
     } 


     protected void Application_BeginRequest(object sender, EventArgs e) 
     { 

      if (Context.Request.Path.Contains("api/") && Context.Request.HttpMethod == "OPTIONS") 
      { 

       Context.Response.AddHeader("Access-Control-Allow-Origin", Context.Request.Headers["Origin"]); 
       Context.Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
       Context.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST PUT, DELETE, OPTIONS"); 
       Context.Response.AddHeader("Access-Control-Allow-Credentials", "true"); 
       Context.Response.End(); 
      } 

     } 

    } 
} 

Answer 4

Вам нужно изменить ваш Web API немного для обработки запросов кросс-доменов. Включите библиотеку Microsoft Asp-Net Server Cors в проект Web Api и еще несколько изменений в уровне кода, и вы готовы к работе. Для получения дополнительной информации см. here.

Ваша угловая часть полностью прекрасна.