AngularJS CORS问题

我已经search了超过200个网站(可能夸大,但不是太多),如何能够与angularjs处理cors。 我们有一台运行Web 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) { } }; }); 

当我浏览到在浏览器中提供json的url时,它会分发数据。 在服务器上,我们允许跨域的起源,这是我以前的声明显而易见。 正如你可以看到我在myApp.config中实现标头覆盖,我甚至尝试把它直接放在我的控制器…没有区别…

现在在这个任务上3天。

帮助这是比赞赏。 提前致谢。

您可能需要稍微更改您的Web API。 我遇到了同样的问题,写了一篇关于如何解决这个问题的文章。

我使用Sinatra的API,我不知道你用什么语言为您的Web服务,但我想你可以应用它。 基本上,您需要configuration您的服务器来接受CORS调用,方法是定义哪些来源和哪些HTTP方法是允许的。

你说你已经在你的服务器上启用了它,但是你做了什么?

有关更多详细信息,请参阅此文章: 使用angular.js的CORS

如果你打算用数据发布到你的WebApi上,那么你需要做更多的工作。 您需要拦截预检,并将客户出处作为允许来源。

如果有更好的解决scheme,那么经过多天专门处理这个问题,我无法find它。 最后,这是对我有用的。

祝你好运…

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

您需要稍微修改您的Web API来处理跨域请求。 在Web Api项目中包含Microsoft Asp-Net Server Cors库以及更多代码级别的修改,您就可以开始了。 为更多看看这里。

你的angular部分是完全没问题的。

如果是ASP.NET WebAPI,则需要安装CORS包并在Web服务器启动时初始化CORS

该软件包被称为Microsoft.OWin.Cors

WebiApiConfig.cs放入类似于:

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