1.跨域問題

1.1 什么是跨域

跨域是指跨域名的訪問，以下情況都屬于跨域：

如果域名和端口都相同，但是請(qǐng)求路徑不同，不屬于跨域，如：

www.jd.com/item

www.jd.com/goods

1.2 為什么有跨域問題？

跨域不一定會(huì)有跨域問題。

因?yàn)榭缬騿栴}是瀏覽器對(duì)于ajax請(qǐng)求的一種安全限制：一個(gè)頁面發(fā)起的ajax請(qǐng)求，只能是于當(dāng)前頁同域名的路徑，這能有效的阻止跨站攻擊。

因此：跨域問題 是針對(duì)ajax的一種限制。

但是這卻給我們的開發(fā)帶來了不變，而且在實(shí)際生成環(huán)境中，肯定會(huì)有很多臺(tái)服務(wù)器之間交互，地址和端口都可能不同，怎么辦？

1.3 解決跨域問題的方案

目前比較常用的跨域解決方案有3種：

• Jsonp

  最早的解決方案，利用script標(biāo)簽可以跨域的原理實(shí)現(xiàn)。

  限制：

  • 需要服務(wù)的支持
  • 只能發(fā)起GET請(qǐng)求

  Jsonp原理與實(shí)踐

• nginx反向代理

  思路是：利用nginx反向代理把跨域?yàn)椴豢缬颍С指鞣N請(qǐng)求方式

  缺點(diǎn)：需要在nginx進(jìn)行額外配置，語義不清晰

• CORS

  規(guī)范化的跨域請(qǐng)求解決方案，安全可靠。

  優(yōu)勢(shì)：

  • 在服務(wù)端進(jìn)行控制是否允許跨域，可自定義規(guī)則
  • 支持各種請(qǐng)求方式

  缺點(diǎn)：

  • 會(huì)產(chǎn)生額外的請(qǐng)求

我們這里會(huì)采用cors的跨域方案。

2 cors解決跨域

2.1 什么是cors

CORS是一個(gè)W3C標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing）。

它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請(qǐng)求，從而克服了AJAX只能同源使用的限制。

CORS需要瀏覽器和服務(wù)器同時(shí)支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。

• 瀏覽器端：

  目前，所有瀏覽器都支持該功能（IE10以下不行）。整個(gè)CORS通信過程，都是瀏覽器自動(dòng)完成，不需要用戶參與。

• 服務(wù)端：

  CORS通信與AJAX沒有任何差別，因此你不需要改變以前的業(yè)務(wù)邏輯。只不過，瀏覽器會(huì)在請(qǐng)求中攜帶一些頭信息，我們需要以此判斷是否運(yùn)行其跨域，然后在響應(yīng)頭中加入一些信息即可。這一般通過過濾器完成即可。

2.2 原理有點(diǎn)復(fù)雜

瀏覽器會(huì)將ajax請(qǐng)求分為兩類，其處理方案略有差異：簡單請(qǐng)求、特殊請(qǐng)求。

簡單請(qǐng)求

只要同時(shí)滿足以下兩大條件，就屬于簡單請(qǐng)求。：

（1) 請(qǐng)求方法是以下三種方法之一：

• 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請(qǐng)求是簡單請(qǐng)求時(shí)，會(huì)在請(qǐng)求頭中攜帶一個(gè)字段：Origin.

Origin

Origin中會(huì)指出當(dāng)前請(qǐ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

注意：

如果跨域請(qǐng)求要想操作cookie，需要滿足3個(gè)條件：

• 服務(wù)的響應(yīng)頭中需要攜帶Access-Control-Allow-Credentials并且為true。
• 瀏覽器發(fā)起ajax需要指定withCredentials 為true
• 響應(yīng)頭中的Access-Control-Allow-Origin一定不能為*，必須是指定的域名

特殊請(qǐng)求

不符合簡單請(qǐng)求的條件，會(huì)被瀏覽器判定為特殊請(qǐng)求,，例如請(qǐng)求方式為PUT。

預(yù)檢請(qǐng)求

特殊請(qǐng)求會(huì)在正式通信之前，增加一次HTTP查詢請(qǐng)求，稱為"預(yù)檢"請(qǐng)求（preflight）。

瀏覽器先詢問服務(wù)器，當(dāng)前網(wǎng)頁所在的域名是否在服務(wù)器的許可名單之中，以及可以使用哪些HTTP動(dòng)詞和頭信息字段。只有得到肯定答復(fù)，瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求，否則就報(bào)錯(cuò)。

一個(gè)“預(yù)檢”請(qǐng)求的樣板：

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...

與簡單請(qǐng)求相比，除了Origin以外，多了兩個(gè)頭：

• Access-Control-Request-Method：接下來會(huì)用到的請(qǐng)求方式，比如PUT
• Access-Control-Request-Headers：會(huì)額外用到的頭信息

預(yù)檢請(qǐng)求的響應(yīng)

服務(wù)的收到預(yù)檢請(qǐng)求，如果許可跨域，會(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請(qǐng)求就無需再次進(jìn)行預(yù)檢了

如果瀏覽器得到上述響應(yīng)，則認(rèn)定為可以跨域，后續(xù)就跟簡單請(qǐng)求的處理是一樣的了。

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è)配置類，并且注冊(cè)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) 允許的請(qǐng)求方式
        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.添加映射路徑，我們攔截一切請(qǐng)求
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);

        //3.返回新的CorsFilter.
        return new CorsFilter(configSource);
    }
}

結(jié)構(gòu)：

放到Application下即可。

GlobalCorsConfig

4.5.4.重啟測(cè)試：

訪問正常：

訪問正常