CORS Via Web API 2

前言

什么是CORS，看起来怎么有点像CQRS？
CORS是Cross-Origin Resource Sharing（跨域资源共享）的简称，简称的主要目的是为了显得高大上同时让人迷惑不解。
具体定义和介绍可以看 W3C的文档
CQRS的全称是Command Query Responsibility Seperation（命令查询职责分离），与本文无关。

介绍

CORS 是W3C（World Wide Web Consortium 万维网联盟，请注意不是复仇者联盟) 的一个规范，目的在于让JavaScript克服浏览器强加的同源策略安全限制。 同源策略意味着您的JavaScript只能使AJAX回调到包含网页的相同原点（其中“origin”被定义为主机名，协议和端口号的组合）。 例如，来自 http://localhost 的Web页面上的JavaScript不能将AJAX调用到 http://wwww.micorosoft.com （或 http://www.localhost:8086 ）上的资源。

** 简单的说，就是W3C先把你的手绑起来，然后再想个法子开个后门给你松松绑，就这样。这都是他们整出来黑我大代码党的幺蛾子。**

CORS通过让服务器标注哪些资源允许被跨域调用，来放宽这个限制。 CORS由浏览器执行，但必须在服务器上实现，最新版本的ASP.NET Web API 2具有完整的CORS支持。 使用Web API 2，您可以配置策略以允许来自不同来源的JavaScript客户端访问您的API。

更详细的中文资料可以看 这儿

正文

首先，假设你知道怎么使用C#编写WebAPI，如果不懂，可以看看 十分钟快速实现WebAPI 。
其次，假设你知道怎么使用Postman， 懂得写前端页面，或者懂得写ASP.NET MVC，总之，你懂得写一点点JS代码。 不懂的话，可以先看看 Vue.JS 单页应用 - 联系人管理（一） 这个系列，洗洗脑先。
如果你两个都不懂，我比较好奇你是怎么点进来的？！
你前后端都懂了，我就随便说些有的没的。

1. XMLHttpRequest cannot load XXXX. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
   这个错误通常是因为你直接使用文件管理器打开的HTML文件，而FILE协议默认并不在支持中。只要你通过HTTP协议访问就可以避免这个问题了。
   如果你确实想，非常想本地也能，咋办呢，还是有办法的...
   ** 给浏览器传入启动参数（allow-file-access-from-files），允许跨域访问。**
   Windows下，运行（CMD+R）或建立快捷方式：
   "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
2. Origin xxxx is not allowed by Access-Control-Allow-Origin
   错误看起来像下图，
   不允许域xxxx的请求
   这个错误，说的是你发出请求的域，没有在服务器允许的范围之内。解决方法是修改web.config，找到这样的地方，没有就添加，有的话，就看看有啥不同，简单的说就是找不同，大家来找茬。

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <!-- Adding the following custom HttpHeader 
                 will help prevent CORS from stopping the Request-->
            <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

入门的时候，你就这样写，反正死不了，高手的话，反正也不需要我说，应该知道，哪儿该花点心思。

3. Web.config中的配置参数表

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

可以根据需要，调整自己允许的Origin, Headers以及Mothods。

4. EnableCorsAttribute **
   EnableCorsAttribute 类用于配置CORS策略，接受三个或四个参数，这些参数分别为：
   ** 允许的域列表 **
   ** 允许的请求头列表
   ** 允许的请求方法列表**
   允许的响应头列表（可选）
   代码看起来像下面这样

public class ResourcesController : ApiController
{
  [EnableCors("http://localhost:55912", // Origin
              null,                     // Request headers
              "GET",                    // HTTP methods
              "bar",                    // Response headers
              SupportsCredentials=true  // Allow credentials
  )]
  public HttpResponseMessage Get(int id)
  {
    var resp = Request.CreateResponse(HttpStatusCode.NoContent);
    resp.Headers.Add("bar", "a bar value");
    return resp;
  }
  [EnableCors("http://localhost:55912",       // Origin
              "Accept, Origin, Content-Type", // Request headers
              "PUT",                          // HTTP methods
              PreflightMaxAge=600             // Preflight cache duration
  )]
  public HttpResponseMessage Put(Resource data)
  {
    return Request.CreateResponse(HttpStatusCode.OK, data);
  }
  [EnableCors("http://localhost:55912",       // Origin
              "Accept, Origin, Content-Type", // Request headers
              "POST",                         // HTTP methods
              PreflightMaxAge=600             // Preflight cache duration
  )]
  public HttpResponseMessage Post(Resource data)
  {
    return Request.CreateResponse(HttpStatusCode.OK, data);
  }
}