1.跨域問題
1.1 什么是跨域
跨域是指跨域名的訪問溪椎，以下情況都屬于跨域：
| 跨域原因說明 | 示例 |
|---|---|
| 域名不同 |
www.jd.com 與 www.taobao.com
|
| 域名相同，端口不同 |
www.jd.com:8080 與 www.jd.com:8081
|
| 二級域名不同 |
item.jd.com 與 miaosha.jd.com
|
如果域名和端口都相同，但是請求路徑不同校读，不屬于跨域沼侣，如：
www.jd.com/item
www.jd.com/goods
1.2 為什么有跨域問題？
跨域不一定會(huì)有跨域問題歉秫。
因?yàn)榭缬騿栴}是瀏覽器對于ajax請求的一種安全限制：一個(gè)頁面發(fā)起的ajax請求蛾洛，只能是于當(dāng)前頁同域名的路徑，這能有效的阻止跨站攻擊雁芙。
因此：跨域問題 是針對ajax的一種限制轧膘。
但是這卻給我們的開發(fā)帶來了不變，而且在實(shí)際生成環(huán)境中兔甘，肯定會(huì)有很多臺服務(wù)器之間交互谎碍，地址和端口都可能不同，怎么辦洞焙？
1.3 解決跨域問題的方案
目前比較常用的跨域解決方案有3種：
-
Jsonp
最早的解決方案蟆淀，利用script標(biāo)簽可以跨域的原理實(shí)現(xiàn)。
限制：
- 需要服務(wù)的支持
- 只能發(fā)起GET請求
-
nginx反向代理
思路是：利用nginx反向代理把跨域?yàn)椴豢缬蛟璺耍С指鞣N請求方式
缺點(diǎn)：需要在nginx進(jìn)行額外配置扳碍，語義不清晰
-
CORS
規(guī)范化的跨域請求解決方案，安全可靠仙蛉。
優(yōu)勢：
- 在服務(wù)端進(jìn)行控制是否允許跨域笋敞，可自定義規(guī)則
- 支持各種請求方式
缺點(diǎn)：
- 會(huì)產(chǎn)生額外的請求
我們這里會(huì)采用cors的跨域方案。
2 cors解決跨域
2.1 什么是cors
CORS是一個(gè)W3C標(biāo)準(zhǔn)荠瘪，全稱是"跨域資源共享"（Cross-origin resource sharing）夯巷。
它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請求哀墓，從而克服了AJAX只能同源使用的限制趁餐。
CORS需要瀏覽器和服務(wù)器同時(shí)支持。目前篮绰，所有瀏覽器都支持該功能后雷，IE瀏覽器不能低于IE10。
-
瀏覽器端：
目前吠各，所有瀏覽器都支持該功能（IE10以下不行）臀突。整個(gè)CORS通信過程，都是瀏覽器自動(dòng)完成贾漏，不需要用戶參與候学。
-
服務(wù)端：
CORS通信與AJAX沒有任何差別，因此你不需要改變以前的業(yè)務(wù)邏輯纵散。只不過梳码，瀏覽器會(huì)在請求中攜帶一些頭信息隐圾，我們需要以此判斷是否運(yùn)行其跨域，然后在響應(yīng)頭中加入一些信息即可掰茶。這一般通過過濾器完成即可暇藏。
2.2 原理有點(diǎn)復(fù)雜
瀏覽器會(huì)將ajax請求分為兩類，其處理方案略有差異：簡單請求濒蒋、特殊請求叨咖。
簡單請求
只要同時(shí)滿足以下兩大條件，就屬于簡單請求啊胶。：
（1) 請求方法是以下三種方法之一：
- HEAD
- GET
- POST
（2）HTTP的頭信息不超出以下幾種字段：
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type：只限于三個(gè)值
application/x-www-form-urlencoded甸各、multipart/form-data、text/plain
當(dāng)瀏覽器發(fā)現(xiàn)發(fā)現(xiàn)的ajax請求是簡單請求時(shí)焰坪，會(huì)在請求頭中攜帶一個(gè)字段：Origin.
Origin中會(huì)指出當(dāng)前請求屬于哪個(gè)域（協(xié)議+域名+端口）趣倾。服務(wù)會(huì)根據(jù)這個(gè)值決定是否允許其跨域。
如果服務(wù)器允許跨域某饰，需要在返回的響應(yīng)頭中攜帶下面信息：
Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Content-Type: text/html; charset=utf-8
- Access-Control-Allow-Origin：可接受的域儒恋，是一個(gè)具體域名或者*，代表任意
- Access-Control-Allow-Credentials：是否允許攜帶cookie黔漂，默認(rèn)情況下诫尽，cors不會(huì)攜帶cookie，除非這個(gè)值是true
注意：
如果跨域請求要想操作cookie炬守，需要滿足3個(gè)條件：
- 服務(wù)的響應(yīng)頭中需要攜帶Access-Control-Allow-Credentials并且為true牧嫉。
- 瀏覽器發(fā)起ajax需要指定withCredentials 為true
- 響應(yīng)頭中的Access-Control-Allow-Origin一定不能為*，必須是指定的域名
特殊請求
不符合簡單請求的條件减途，會(huì)被瀏覽器判定為特殊請求,酣藻，例如請求方式為PUT。
預(yù)檢請求
特殊請求會(huì)在正式通信之前鳍置，增加一次HTTP查詢請求辽剧，稱為"預(yù)檢"請求（preflight）。
瀏覽器先詢問服務(wù)器税产，當(dāng)前網(wǎng)頁所在的域名是否在服務(wù)器的許可名單之中怕轿，以及可以使用哪些HTTP動(dòng)詞和頭信息字段。只有得到肯定答復(fù)辟拷，瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請求撞羽，否則就報(bào)錯(cuò)。
一個(gè)“預(yù)檢”請求的樣板：
OPTIONS /cors HTTP/1.1
Origin: http://manage.leyou.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.leyou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
與簡單請求相比梧兼，除了Origin以外放吩，多了兩個(gè)頭：
- Access-Control-Request-Method：接下來會(huì)用到的請求方式智听，比如PUT
- Access-Control-Request-Headers：會(huì)額外用到的頭信息
預(yù)檢請求的響應(yīng)
服務(wù)的收到預(yù)檢請求羽杰，如果許可跨域渡紫，會(huì)發(fā)出響應(yīng)：
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 1728000
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
除了Access-Control-Allow-Origin和Access-Control-Allow-Credentials以外，這里又額外多出3個(gè)頭：
- Access-Control-Allow-Methods：允許訪問的方式
- Access-Control-Allow-Headers：允許攜帶的頭
- Access-Control-Max-Age：本次許可的有效時(shí)長考赛，單位是秒惕澎，過期之前的ajax請求就無需再次進(jìn)行預(yù)檢了
如果瀏覽器得到上述響應(yīng)，則認(rèn)定為可以跨域颜骤，后續(xù)就跟簡單請求的處理是一樣的了唧喉。
2.3 實(shí)現(xiàn)非常簡單
雖然原理比較復(fù)雜，但是前面說過：
- 瀏覽器端都有瀏覽器自動(dòng)完成忍抽，我們無需操心
- 服務(wù)端可以通過攔截器統(tǒng)一實(shí)現(xiàn)八孝，不必每次都去進(jìn)行跨域判定的編寫。
事實(shí)上鸠项，SpringMVC已經(jīng)幫我們寫好了CORS的跨域過濾器：CorsFilter ,內(nèi)部已經(jīng)實(shí)現(xiàn)了剛才所講的判定邏輯干跛，我們直接用就好了。
在Application下編寫一個(gè)配置類祟绊，并且注冊CorsFilter：
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
//1.添加CORS配置信息
CorsConfiguration config = new CorsConfiguration();
//1) 允許的域,不要寫*楼入，否則cookie就無法使用了
config.addAllowedOrigin("http://manage.leyou.com");
//2) 是否發(fā)送Cookie信息
config.setAllowCredentials(true);
//3) 允許的請求方式
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");
config.addAllowedMethod("PUT");
config.addAllowedMethod("POST");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
// 4）允許的頭信息
config.addAllowedHeader("*");
//2.添加映射路徑，我們攔截一切請求
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
//3.返回新的CorsFilter.
return new CorsFilter(configSource);
}
}
結(jié)構(gòu)：
放到Application下即可牧抽。
4.5.4.重啟測試：
訪問正常：
