前言
什么是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 单页应用 - 联系人管理（一） 这个系列，洗洗脑先。
如果你两个都不懂，我比较好奇你是怎么点进来的？！
你前后端都懂了，我就随便说些有的没的。
-
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 -
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>
入门的时候，你就这样写，反正死不了，高手的话，反正也不需要我说，应该知道，哪儿该花点心思。
- 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。
-
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);
}
}
