CORS问题与Angular $资源和自己托管的WebAPI

Question

我无法克服我的Angular/Owin slef-host WebAPI应用程序中的CORS问题。

这是我的角服务代码：

变种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.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. 

我能做些什么来解决这个问题？

Answer 1

我的建议是做到以下几点：

1. 不要从你的角度资源设置的“访问控制允许来源”，它是响应头不请求头，应该从设置服务器。

2. 只允许使用application.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);的CORS并将其从控制器属性中甚至从配置中删除。

3. 查看我的Repo here我已经实现了CORS，前端也是AngularJS。它工作正常。这里是the live demo too这个回购，开放开发工具和监控请求，你应该看到pre-flight请求之前，你看到你的HTTP请求。