前言
提起跨域钢猛，可能大多數(shù)猿們都不陌生拉庶，在工作中多多少少都有碰到挨措，現(xiàn)在比較主流的跨域模式有cors和jsonp：
-
jsonp：利用瀏覽器對(duì)script資源的引用沒有同源規(guī)則的限制锣夹，通過動(dòng)態(tài)插入script標(biāo)簽的方式（其實(shí)就是跨域限制的一個(gè)漏洞）讨盒，將地址指向第三方的地址是嗜，比如
<script src="http://www.test.com/test?a=1&b=2"></script>愈案，同時(shí)提供一個(gè)回調(diào)函數(shù)來處理第三方響應(yīng)的json數(shù)據(jù)callback({"a": 1, "b": 2})。當(dāng)然鹅搪，客戶端可以隨意定制回調(diào)函數(shù)來處理返回?cái)?shù)據(jù)站绪，主需要跟服務(wù)端提前約定好即可。注：需要注意的是：jsonp的跨域模式其實(shí)就是一種腳本注入的行為丽柿，它可能會(huì)造成一些不安全的行為恢准。而且，它只支持get請(qǐng)求甫题，不支持post等其它類型的http請(qǐng)求馁筐，而且不能解決不同域的兩個(gè)頁面之間互相進(jìn)行JavaScript調(diào)用的問題。
cors：
Corss-Origin Resource Sharing坠非，跨域資源共享敏沉，它是一個(gè)W3C標(biāo)準(zhǔn)，允許瀏覽器向跨源服務(wù)器發(fā)起XMLHttpRequest請(qǐng)求。
本文將講解簡單請(qǐng)求的cors跨域服務(wù)端如何做盟迟？安全校驗(yàn)如何做秋泳？
簡單請(qǐng)求的cors跨域
注：什么叫簡單請(qǐng)求？
瀏覽器將cors請(qǐng)求分為兩類：簡單請(qǐng)求（simple request）和非簡單請(qǐng)求（not-so-simple request）攒菠，只要同時(shí)滿足以下條件的就屬于簡單請(qǐng)求轮锥，否則都屬于非簡單需求：
- 請(qǐng)求方法是
HEAD，GET要尔，POST之一；- HTTP的頭信息不超出以下幾種字段：
- Accept
- Accept-Language
- Content-Language
- Content-Type：只能取三個(gè)值
application/x-www-form-urlencoded新娜、multipart/form-data赵辕、text/plain- Last-Event-ID
當(dāng)然瀏覽器對(duì)于這兩種請(qǐng)求的處理也是有區(qū)別的，非簡單請(qǐng)求瀏覽器會(huì)增加一次http查詢請(qǐng)求（預(yù)檢請(qǐng)求）概龄，先詢問服務(wù)器當(dāng)前請(qǐng)求域名是否在服務(wù)器的許可名單之中以及可以使用哪些http動(dòng)詞和頭信息字段还惠，只有得到正確的答復(fù)，瀏覽器才會(huì)發(fā)起一次正式的
XMLHttpRequest請(qǐng)求私杜，否則報(bào)錯(cuò)蚕键。
對(duì)于簡單請(qǐng)求的cors跨域，具體的流程如下：
-
瀏覽器發(fā)起請(qǐng)求衰粹，在請(qǐng)求header中增加
Origin字段锣光，表示本次請(qǐng)求來自哪個(gè)源，具體的請(qǐng)求header如下所示：Accept:*/* Accept-Language:zh-CN,zh;q=0.9 Connection:keep-alive Origin:https://miao.test.com User-Agent:Mozilla/5.0... -
服務(wù)端接收到請(qǐng)求后铝耻，判斷
Origin指定的源誊爹，如果在允許調(diào)用的范圍呢，服務(wù)端正常返回瓢捉，需要注意的是频丘，服務(wù)端在返回時(shí)需要在header中設(shè)置Access-Control-Allow-Origin字段，瀏覽器會(huì)判斷該字段是否包含請(qǐng)求中的Origin值泡态，如果包含搂漠，響應(yīng)正確，否則某弦，瀏覽器會(huì)拋出錯(cuò)誤桐汤，正確響應(yīng)header如下所示：Access-Control-Allow-Credentials:true Access-Control-Allow-Origin:https://miao.test.com Access-Control-Expose-Headers: FooBar Content-Type: text/html; charset=utf-8上文響應(yīng)header中有3個(gè)與cors請(qǐng)求相關(guān)的字段：
-
Access-Control-Allow-Origin：必須要有的字段，它的值可以是請(qǐng)求header的Origin的值刀崖，也可以是*（表示接受任何域的請(qǐng)求）惊科，需要注意的是，如果為*的話亮钦，會(huì)有一系列的安全問題馆截，建議不要這么做； -
Access-Control-Allow-Credentials：可選字段，表示是否允許發(fā)送cookie蜡娶，true表示允許混卵，另外該字段的值只能設(shè)置為true，如果服務(wù)端不需要瀏覽器發(fā)送cookie窖张，刪除該字段就可以幕随。需要注意的是，如果需要發(fā)送cookie還需要前端配合的宿接，前端必須要在ajax請(qǐng)求中打開withCredentials屬性赘淮； -
Access-Control-Expose-Headers：可選字段，可以通過該字段指定獲取響應(yīng)header中的某個(gè)字段的值睦霎。
-
知道流程之后梢卸，那么對(duì)于cors跨域的安全怎么做也就一目了然了，可以直接判斷請(qǐng)求的Origin是否在允許跨域的域名白名單內(nèi)副女，如果在蛤高，則服務(wù)端允許返回正確響應(yīng)，否則碑幅，服務(wù)端攔截戴陡，響應(yīng)異常。接下來給個(gè)簡單的例子吧沟涨，一看就會(huì)用：
安全校驗(yàn)Interceptor
服務(wù)端Controller處理
服務(wù)端的處理方式與正常同源請(qǐng)求響應(yīng)一樣恤批，不需要像jsonp那樣需要包裝響應(yīng)數(shù)據(jù)：
@RequestMapping(value = "/test.json", method = RequestMethod.POST)
public void test(HttpServletRequest request, ModelMap modelMap) {
try {
modelMap.put("success", true);
modelMap.put("data", "test");
} catch (Exception e) {
modelMap.put("success", false);
modelMap.put("errCode", 1001);
modelMap.put("errMsg", "系統(tǒng)異常");
}
}
到這里，簡單請(qǐng)求的cors模式跨域就大致介紹完了裹赴，非簡單請(qǐng)求大家在工作中其實(shí)不太常遇到开皿，在這里我就不做詳細(xì)的介紹了，以后遇到了再做相關(guān)介紹篮昧。就讓我小小的放飛下自己~~~~~~
