Проблемы с AngularJS CORS
Я искал более 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 дня по этой задаче.
Помощь с этим БОЛЬШЕ, чем оценено. Спасибо заранее.
Ответы
Ответ 1
Возможно, вам придется немного изменить свой веб-API. Я встретил такую же проблему и написал сообщение о том, как исправить эту проблему.
Я использовал Sinatra для API, я не знаю, какой язык вы используете для своих веб-сервисов, но я думаю, вы можете применить его. В принципе, вам нужно настроить сервер для принятия вызовов CORS, определяя, какое происхождение и какие методы HTTP разрешены.
Вы сказали, что уже включили его на своем сервере, но что вы сделали точно?
Смотрите это сообщение для получения дополнительной информации: CORS с angular.js
Ответ 2
Если вы захотите загрузить POST на свой 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();
}
}
}
}
Ответ 3
Если это ASP.NET
WebAPI, вам нужно установить пакет CORS
и инициализировать CORS
при запуске веб-сервера.
Пакет называется Microsoft.OWin.Cors
В WebiApiConfig.cs
введите что-то вроде:
var cors = new EnabledCorsAttribute("*", "*", "DataServiceVersion, MaxDataServiceVersion");
config.EnableCors(cors);
Ответ 4
Вам нужно немного изменить свой веб-интерфейс, чтобы обрабатывать запросы кросс-домена.
Включите библиотеку Microsoft Asp-Net Server Cors в проект Web Api и еще несколько изменений в уровне кода, и вы готовы к работе. Для более смотрите здесь.
Ваша часть Angular полностью прекрасна.