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