Angular $resource 和自托管 WebAPI 的 CORS 问题
Posted
技术标签:
【中文标题】Angular $resource 和自托管 WebAPI 的 CORS 问题【英文标题】:CORS issue with Angular $resource and self hosted WebAPI 【发布时间】:2014-12-12 11:26:10 【问题描述】:我无法在我的 Angular/Owin slef-host WebAPI 应用程序中解决 CORS 问题。
这是我的 Angular 服务代码:
var grmService = angular.module('grmService', ['ngResource']);
grmService.factory('Grm', ['$resource',
function($resource)
return $resource('http://accountviewserver:8080/api/grm',
query:
method: 'GET',
isArray: true,
headers: 'Access-Control-Allow-Origin': "*"
);
]);
这是我的 Angular 控制器代码:
angular.module('TaskManager')
.controller('ResourceDashboardController', ['$scope','Grm',
function ($scope,Grm)
$scope.grmData = Grm.query();
...
这是我的 OWIN 自托管 WebPipeline 配置:
namespace AccountView3
using System.Web.Http;
using Microsoft.Owin;
using Microsoft.Owin.FileSystems;
using Microsoft.Owin.StaticFiles;
using Owin;
using System.Web.Http.Cors;
public class WebPipeline
public void Configuration(IAppBuilder application)
application.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
UseWebApi(application);
application.UseNancy(options => options.Bootstrapper = new NancyBootstrapper());
private static void UseWebApi(IAppBuilder application)
var config = new HttpConfiguration();
config.MapHttpAttributeRoutes();
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/controller/id",
defaults: new id = RouteParameter.Optional
);
application.UseWebApi(config);
public static bool IsDevelopment()
return true;
这是我的 WebAPI 控制器:
using System;
using System.Collections.Generic;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Http.Cors;
namespace AccountView3
[EnableCors(origins: "*", headers: "*", methods: "*")]
public class GrmController : ApiController
Demand[] demand = new Demand[]
new Demand PositionId = 1, Description = "Lead Architect", Account = "AON", StartDate = Convert.ToDateTime("06/06/2014"), Role = "Architect",Fte = 1 ,
new Demand PositionId = 2, Description = "PTM builder", Account = "Zurich", StartDate = Convert.ToDateTime("07/07/2014"), Role = "Architect",Fte = 1,
new Demand PositionId = 3, Description = "Transition Architect", Account = "Adib", StartDate = Convert.ToDateTime("08/08/2014"), Role = "Architect",Fte = 1
;
public HttpResponseMessage Options()
var response = Request.CreateResponse(HttpStatusCode.OK);
response.Headers.Add("Access-Control-Allow-Origin", "*");
response.Headers.Add("Access-Control-Allow-Methods", "POST");
response.Headers.Add("Access-Control-Allow-Methods", "GET");
response.Headers.Add("Access-Control-Allow-Methods", "PUT");
response.Headers.Add("Access-Control-Allow-Methods", "DELETE");
response.Headers.Add("Access-Control-Allow-Headers", "Content-Type");
return response;
// GET api/values
public HttpResponseMessage Get()
var response = Request.CreateResponse(HttpStatusCode.OK, demand);
response.Headers.Add("Access-Control-Allow-Origin","*");
response.Headers.Add("Access-Control-Allow-Methods", "POST");
response.Headers.Add("Access-Control-Allow-Methods", "GET");
response.Headers.Add("Access-Control-Allow-Methods", "PUT");
response.Headers.Add("Access-Control-Allow-Methods", "DELETE");
response.Headers.Add("Access-Control-Allow-Headers", "Content-Type");
return response;
// GET api/values/5
public string Get(int id)
return "value";
// POST api/values
public void Post([FromBody]string value)
// PUT api/values/5
public void Put(int id, [FromBody]string value)
// DELETE api/values/5
public void Delete(int id)
public class Demand
public int PositionId get; set;
public string Description get; set;
public string Account get; set;
public DateTime StartDate get; set;
public string Role get; set;
public int Fte get; set;
所有这些都设置为允许 CORS,我仍然得到:
XMLHttpRequest cannot load http://accountviewserver/api/grm?query=%5Bobject+Object%5D. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. The response had HTTP status code 404.
我能做些什么来解决这个问题?
【问题讨论】:
我认为您应该在 API 项目的响应标头中添加“Access-Control-Allow-Origin”标头。 【参考方案1】:我的建议是执行以下操作:
不要从你的角度资源中设置“Access-Control-Allow-Origin”,它是响应头而不是请求头,应该从服务器设置。
仅允许使用 application.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
的 CORS,并将其从控制器属性中甚至从配置中删除。
检查我的Repo here,我在那里实现了CORS,前端也是AngularJS。它工作正常。这里是这个 repo 的the live demo too,打开开发者工具并监控请求,你应该在看到你的 HTTP 获取请求之前看到 pre-flight 请求。
【讨论】:
我正在尝试您的教程!我要去第二部分了!..真的很好解释! @RenanFranca 很高兴您喜欢它,如果您需要帮助,请告诉我 :)以上是关于Angular $resource 和自托管 WebAPI 的 CORS 问题的主要内容,如果未能解决你的问题,请参考以下文章
Angular Generating browser application bundles (phase: setup)...An unhandled exception occurred: we
angular-resource.js encodeUriSegment 问题