Question

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

这是我的Angular服务代码：

var grmService = angular.module（＆＃39; grmService＆＃39;，[＆＃39; ngResource＆＃39;]）;

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.

我该怎么做才能解决这个问题？

Answer 1

我的建议是执行以下操作：

不要设置＆＃34; Access-Control-Allow-Origin＆＃34;从您的角度资源，它是响应头而不是请求头，应该从服务器设置。
只允许使用application.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);使用CORS，并将其从控制器属性中删除，甚至从配置中删除。
检查我Repo here我在哪里实施了CORS，前端也是AngularJS。它工作正常。对于此repo，开放式开发人员工具以及监控请求，the live demo too为{{3}}，您应该在看到HTTP get请求之前看到转机前请求。

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

1 个答案: