前言
什么是CORS腰奋，看起來怎么有點(diǎn)像CQRS？
CORS是Cross-Origin Resource Sharing（跨域資源共享）的簡(jiǎn)稱抱怔，簡(jiǎn)稱的主要目的是為了顯得高大上同時(shí)讓人迷惑不解劣坊。
具體定義和介紹可以看 W3C的文檔
CQRS的全稱是Command Query Responsibility Seperation（命令查詢職責(zé)分離），與本文無關(guān)屈留。
介紹
CORS 是W3C（World Wide Web Consortium 萬維網(wǎng)聯(lián)盟局冰，請(qǐng)注意不是復(fù)仇者聯(lián)盟) 的一個(gè)規(guī)范，目的在于讓JavaScript克服瀏覽器強(qiáng)加的同源策略安全限制灌危。 同源策略意味著您的JavaScript只能使AJAX回調(diào)到包含網(wǎng)頁的相同原點(diǎn)（其中“origin”被定義為主機(jī)名康二，協(xié)議和端口號(hào)的組合）。 例如勇蝙，來自 http://localhost 的Web頁面上的JavaScript不能將AJAX調(diào)用到 http://wwww.micorosoft.com （或 http://www.localhost:8086 ）上的資源赠摇。
** 簡(jiǎn)單的說，就是W3C先把你的手綁起來浅蚪，然后再想個(gè)法子開個(gè)后門給你松松綁藕帜，就這樣。這都是他們整出來黑我大代碼黨的幺蛾子惜傲。**
CORS通過讓服務(wù)器標(biāo)注哪些資源允許被跨域調(diào)用洽故，來放寬這個(gè)限制。 CORS由瀏覽器執(zhí)行盗誊，但必須在服務(wù)器上實(shí)現(xiàn)时甚，最新版本的ASP.NET Web API 2具有完整的CORS支持。 使用Web API 2哈踱，您可以配置策略以允許來自不同來源的JavaScript客戶端訪問您的API荒适。
更詳細(xì)的中文資料可以看 這兒
正文
首先，假設(shè)你知道怎么使用C#編寫WebAPI开镣，如果不懂刀诬，可以看看 十分鐘快速實(shí)現(xiàn)WebAPI 。
其次邪财，假設(shè)你知道怎么使用Postman陕壹， 懂得寫前端頁面，或者懂得寫ASP.NET MVC树埠，總之糠馆，你懂得寫一點(diǎn)點(diǎn)JS代碼。 不懂的話怎憋，可以先看看 Vue.JS 單頁應(yīng)用 - 聯(lián)系人管理（一） 這個(gè)系列又碌，洗洗腦先九昧。
如果你兩個(gè)都不懂，我比較好奇你是怎么點(diǎn)進(jìn)來的毕匀？耽装！
你前后端都懂了，我就隨便說些有的沒的期揪。
-
XMLHttpRequest cannot load XXXX. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
這個(gè)錯(cuò)誤通常是因?yàn)槟阒苯邮褂梦募芾砥鞔蜷_的HTML文件，而FILE協(xié)議默認(rèn)并不在支持中规个。只要你通過HTTP協(xié)議訪問就可以避免這個(gè)問題了凤薛。
如果你確實(shí)想，非常想本地也能诞仓，咋辦呢缤苫，還是有辦法的...
** 給瀏覽器傳入啟動(dòng)參數(shù)（allow-file-access-from-files），允許跨域訪問墅拭。**
Windows下活玲，運(yùn)行（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
錯(cuò)誤看起來像下圖，
不允許域xxxx的請(qǐng)求
這個(gè)錯(cuò)誤谍婉，說的是你發(fā)出請(qǐng)求的域舒憾，沒有在服務(wù)器允許的范圍之內(nèi)。解決方法是修改web.config穗熬，找到這樣的地方镀迂，沒有就添加，有的話唤蔗，就看看有啥不同探遵，簡(jiǎn)單的說就是找不同，大家來找茬妓柜。
<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>
入門的時(shí)候箱季，你就這樣寫，反正死不了棍掐，高手的話藏雏，反正也不需要我說，應(yīng)該知道作煌，哪兒該花點(diǎn)心思诉稍。
- Web.config中的配置參數(shù)表
<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>
可以根據(jù)需要，調(diào)整自己允許的Origin, Headers以及Mothods最疆。
-
EnableCorsAttribute **
EnableCorsAttribute 類用于配置CORS策略杯巨，接受三個(gè)或四個(gè)參數(shù)，這些參數(shù)分別為：
** 允許的域列表 **
** 允許的請(qǐng)求頭列表
** 允許的請(qǐng)求方法列表**
允許的響應(yīng)頭列表（可選）
代碼看起來像下面這樣
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);
}
}
