Asp.Net WebApi2 启用 CORS 不适用于 AspNet.WebApi.Cors 5.2.3

Question

我尝试按照 http://enable-cors.org/server_aspnet.html 中的步骤操作让我的 RESTful API（使用 ASP.NET WebAPI2 实现）处理跨源请求（启用 CORS）。它不起作用，除非我修改 web.config.

我安装了 WebApi Cors 依赖：

install-package Microsoft.AspNet.WebApi.Cors -ProjectName MyProject.Web.Api

然后在我的 App_Start 中得到 class WebApiConfig 如下：

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        var corsAttr = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(corsAttr);

        var constraintsResolver = new DefaultInlineConstraintResolver();

        constraintsResolver.ConstraintMap.Add("apiVersionConstraint", typeof(ApiVersionConstraint));
        config.MapHttpAttributeRoutes(constraintsResolver); 
        config.Services.Replace(typeof(IHttpControllerSelector), new NamespaceHttpControllerSelector(config));
        //config.EnableSystemDiagnosticsTracing(); 
        config.Services.Replace(typeof(ITraceWriter), new SimpleTraceWriter(WebContainerManager.Get<ILogManager>())); 
        config.Services.Add(typeof(IExceptionLogger), new SimpleExceptionLogger(WebContainerManager.Get<ILogManager>()));
        config.Services.Replace(typeof(IExceptionHandler), new GlobalExceptionHandler()); 
    }
}

但在我运行应用程序之后，我使用 Fiddler 请求资源，例如： http://localhost:51589/api/v1/persons 在响应中我看不到我应该看到的 HTTP headers 例如：

Access-Control-Allow-Methods: POST, PUT, DELETE, GET, OPTIONS
Access-Control-Allow-Origin: *

我是不是漏掉了一些步骤？我尝试在控制器上使用以下注释：

[EnableCors(origins: "http://example.com", headers: "*", methods: "*")]

同样的结果，没有启用 CORS。

但是，如果我在我的 web.config 中添加以下内容（甚至没有安装 AspNet.WebApi.Cors 依赖项），它就会起作用：

<system.webServer>

<httpProtocol>
  <!-- THESE HEADERS ARE IMPORTANT TO WORK WITH CORS -->
  <!--
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Methods" value="POST, PUT, DELETE, GET, OPTIONS" />
    <add name="Access-Control-Allow-Headers" value="content-Type, accept, origin, X-Requested-With, Authorization, name" />
    <add name="Access-Control-Allow-Credentials" value="true" />
  </customHeaders>
  -->
</httpProtocol>
<handlers>
  <!-- THESE HANDLERS ARE IMPORTANT FOR WEB API TO WORK WITH  GET,HEAD,POST,PUT,DELETE and CORS-->
  <!--

  <remove name="WebDAV" />
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,PUT,DELETE" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <remove name="OPTIONSVerbHandler" />
  <remove name="TRACEVerbHandler" />
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
-->
</handlers>

如有任何帮助，我们将不胜感激！

谢谢。

Answer 1

在 CORS 请求的情况下，所有现代浏览器都以 OPTION 动词响应，然后实际请求通过。这应该用于在 CORS 请求的情况下提示用户进行确认。但是在 API 的情况下，如果您想跳过此验证过程，请将以下代码段添加到 Global.asax

        protected void Application_BeginRequest(object sender, EventArgs e)
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
            if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE");

                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
                HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
                HttpContext.Current.Response.End();
            }
        }

这里我们只是通过检查 OPTIONS 动词来通过检查。

Answer 2

我已经为您创建了一个 pared-down 演示项目。

来源: https://github.com/bigfont/webapi-cors
Api Link: https://cors-webapi.azurewebsites.net/api/values

您可以尝试使用本地 Fiddler 中的上述 API Link 来查看 headers。这里有一个解释。

Global.ascx

这只是调用 WebApiConfig。无非就是代码组织。

public class WebApiApplication : System.Web.HttpApplication
{
    protected void Application_Start()
    {
        WebApiConfig.Register(GlobalConfiguration.Configuration);
    }
}

WebApiConfig.cs

这里的关键方法是 EnableCrossSiteRequests 方法。这是您需要做的全部。 EnableCorsAttribute 是 globally scoped CORS attribute.

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        EnableCrossSiteRequests(config);
        AddRoutes(config);
    }

    private static void AddRoutes(HttpConfiguration config)
    {
        config.Routes.MapHttpRoute(
            name: "Default",
            routeTemplate: "api/{controller}/"
        );
    }

    private static void EnableCrossSiteRequests(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute(
            origins: "*", 
            headers: "*", 
            methods: "*");
        config.EnableCors(cors);
    }
}

Values Controller

Get 方法接收我们全局应用的 EnableCors 属性。 Another 方法覆盖全局 EnableCors.

public class ValuesController : ApiController
{
    // GET api/values
    public IEnumerable<string> Get()
    {
        return new string[] { 
            "This is a CORS response.", 
            "It works from any origin." 
        };
    }

    // GET api/values/another
    [HttpGet]
    [EnableCors(origins:"http://www.bigfont.ca", headers:"*", methods: "*")]
    public IEnumerable<string> Another()
    {
        return new string[] { 
            "This is a CORS response. ", 
            "It works only from two origins: ",
            "1. www.bigfont.ca ",
            "2. the same origin." 
        };
    }
}

Web.config

您不需要在 web.config 中添加任何特殊内容。事实上，这就是演示的 web.config 的样子 - 它是空的。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
</configuration>

演示

var url = "https://cors-webapi.azurewebsites.net/api/values"

$.get(url, function(data) {
  console.log("We expect this to succeed.");
  console.log(data);
});

var url = "https://cors-webapi.azurewebsites.net/api/values/another"

$.get(url, function(data) {
  console.log(data);
}).fail(function(xhr, status, text) {
  console.log("We expect this to fail.");
  console.log(status);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

我刚遇到同样的问题，正在尝试 enable CORS globally。但是我发现它确实工作，但是只有当请求包含 Origin header 值时。如果省略 origin header 值，响应将不包含 Access-Control-Allow-Origin.

我使用了一个名为 DHC 的 chrome 插件来测试我的 GET 请求。它让我可以轻松添加 Origin header。

Answer 4

None 这些答案确实有效。正如其他人指出的那样，如果请求具有 Origin header，Cors 包将仅使用 Access-Control-Allow-Origin header。但是您通常不能只向请求添加 Origin header，因为浏览器也可能会尝试对其进行监管。

如果您想要一种快速而肮脏的方式来允许对 Web 的跨站点请求 api，只编写自定义过滤器属性确实容易得多：

public class AllowCors : ActionFilterAttribute
{
    public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
    {
        if (actionExecutedContext == null)
        {
            throw new ArgumentNullException("actionExecutedContext");
        }
        else
        {
            actionExecutedContext.Response.Headers.Remove("Access-Control-Allow-Origin");
            actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");
        }
        base.OnActionExecuted(actionExecutedContext);
    }
}

然后只需在您的控制器操作上使用它：

[AllowCors]
public IHttpActionResult Get()
{
    return Ok("value");
}

我一般不会保证这样做的安全性，但它可能比在 web.config 中设置 header 安全得多，因为这样你就可以只具体地应用它们因为你需要他们。

当然，修改以上内容以仅允许某些来源、方法等也很简单

Answer 5

我发现这个问题是因为我在处理大多数浏览器发送的 OPTIONS 请求时遇到了问题。我的应用程序正在路由 OPTIONS 请求并使用我的 IoC 构造大量对象，并且出于各种原因，有些应用程序在这种奇怪的请求类型上抛出异常。

基本上为所有 OPTIONS 请求设置一个忽略路由，如果它们给您带来问题：

var constraints = new { httpMethod = new HttpMethodConstraint(HttpMethod.Options) };
config.Routes.IgnoreRoute("OPTIONS", "{*pathInfo}", constraints);

更多信息：Stop Web API processing OPTIONS requests

Answer 6

希望这对以后的人有所帮助。我的问题是我正在按照与 OP 相同的教程来启用全局 CORS。但是，我还在 AccountController.cs 文件中设置了特定于操作的 CORS 规则：

[EnableCors(origins: "", headers: "*", methods: "*")]

并且收到有关来源不能为 null 或空字符串的错误。但是错误发生在所有地方的 Global.asax.cs 文件中。解决办法是改成：

[EnableCors(origins: "*", headers: "*", methods: "*")]

注意到 origins 中的 * 了吗？缺少它是导致 Global.asax.cs 文件中出现错误的原因。

希望这对某人有所帮助。

Answer 7

您只需要更改一些文件。这对我有用。

Global.ascx

public class WebApiApplication : System.Web.HttpApplication {
    protected void Application_Start()
    {
        WebApiConfig.Register(GlobalConfiguration.Configuration);
    } }

WebApiConfig.cs

所有请求都必须调用此代码。

public static class WebApiConfig {
    public static void Register(HttpConfiguration config)
    {
        EnableCrossSiteRequests(config);
        AddRoutes(config);
    }

    private static void AddRoutes(HttpConfiguration config)
    {
        config.Routes.MapHttpRoute(
            name: "Default",
            routeTemplate: "api/{controller}/"
        );
    }

    private static void EnableCrossSiteRequests(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute(
            origins: "*", 
            headers: "*", 
            methods: "*");
        config.EnableCors(cors);
    } }

一些控制器

无需更改。

Web.config

您需要在 web.config

中添加处理程序

<configuration> 
  <system.webServer>
    <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers>   
  </system.webServer> 
</configuration>

Answer 8

我刚刚将自定义 headers 添加到 Web.config 中，效果非常好。

关于配置 - system.webServer:

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
  </customHeaders>
</httpProtocol>

我在同一个解决方案上有前端应用程序和后端。为此，我需要将 Web 服务项目（后端）设置为默认设置。

我使用的是 ReST，没有尝试过其他任何东西。

Answer 9

WEBAPI2：解决方案。 global.asax.cs:

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

在解决方案资源管理器中，右键单击 api-项目。在属性 window 将 'Anonymous Authentication' 设置为 Enabled !!!

希望这对以后的人有所帮助。

Answer 10

在我的 Web.config CORS 进行一些修改后，我的 Web API 2 项目突然停止工作（至少对于预检期间的 OPTIONS 请求）。似乎您需要在 Web.config 中包含下面提到的部分，否则（全局）EnableCorsAttribute 将无法处理 OPTIONS 请求。请注意，这与 Visual Studio 将添加到新 Web API 2 项目中的部分完全相同。

<system.webServer>
  <handlers>
    <remove name="ExtensionlessUrlHandler-Integrated-4.0"/>
    <remove name="OPTIONSVerbHandler"/>
    <remove name="TRACEVerbHandler"/>
    <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0"/>
  </handlers>
</system.webServer>

Answer 11

没有一个安全的解决方案对我有用，所以要比 Neeraj 更安全，比 Matthew 更容易，只需添加： System.Web.HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

在您的控制器方法中。这对我有用。

public IHttpActionResult Get()
{
    System.Web.HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
    return Ok("value");
}

Asp.Net WebApi2 启用 CORS 不适用于 AspNet.WebApi.Cors 5.2.3

Asp.Net WebApi2 Enable CORS not working with AspNet.WebApi.Cors 5.2.3

c#

rest

cors

asp.net-web-api2

Global.ascx

WebApiConfig.cs

Values Controller

Web.config

演示