跨域問題

跨域是指跨域名的訪問，如下狀況都屬於跨域。

 

跨域緣由說明	示例
域名不一樣	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

 

爲何有跨域問題？

跨域不必定會有跨域問題。

由於跨域問題是瀏覽器對於ajax請求的一種安全限制：一個頁面發起的ajax請求，只能是於當前頁同域名的路徑，這能有效的阻止跨站攻擊。

所以：跨域問題 是針對ajax的一種限制。

可是這卻給咱們的開發帶來了不便，並且在實際生成環境中，確定會有不少臺服務器之間交互，地址和端口均可能不一樣，怎麼辦？

 

解決跨域問題的方案

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

• Jsonp

  最先的解決方案，利用script標籤能夠跨域的原理實現。

  限制：

  • 須要服務的支持

  • 只能發起GET請求

• nginx反向代理

  思路是：利用nginx反向代理把跨域爲不跨域，支持各類請求方式

  缺點：須要在nginx進行額外配置，語義不清晰

• CORS

  規範化的跨域請求解決方案，安全可靠。

  優點：

  • 在服務端進行控制是否容許跨域，可自定義規則

  • 支持各類請求方式

  缺點：

  • 會產生額外的請求

咱們這裏會採用cors的跨域方案。

 

cors解決跨域

什麼是cors

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。

它容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

CORS須要瀏覽器和服務器同時支持。目前，全部瀏覽器都支持該功能，IE瀏覽器不能低於IE10。

• 瀏覽器端：

  目前，全部瀏覽器都支持該功能（IE10如下不行）。整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與。

• 服務端：

  CORS通訊與AJAX沒有任何差異，所以你不須要改變之前的業務邏輯。只不過，瀏覽器會在請求中攜帶一些頭信息，咱們須要以此判斷是否運行其跨域，而後在響應頭中加入一些信息便可。這通常經過過濾器完成便可。

原理有點複雜

瀏覽器會將ajax請求分爲兩類，其處理方案略有差別：簡單請求、特殊請求。

簡單請求

只要同時知足如下兩大條件，就屬於簡單請求。：

（1) 請求方法是如下三種方法之一：

• HEAD

• GET

• POST

（2）HTTP的頭信息不超出如下幾種字段：

• Accept

• Accept-Language

• Content-Language

• Last-Event-ID

• Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain

當瀏覽器發現發起的的ajax請求是簡單請求時，會在請求頭中攜帶一個字段：Origin.

 

Origin中會指出當前請求屬於哪一個域（協議+域名+端口）。服務會根據這個值決定是否容許其跨域。

若是服務器容許跨域，須要在返回的響應頭中攜帶下面信息：

Access-Control-Allow-Origin: http://manage.ly.com
Access-Control-Allow-Credentials: true

　　

• Access-Control-Allow-Origin：可接受的域，是一個具體域名或者*，表明任意

• Access-Control-Allow-Credentials：是否容許攜帶cookie，默認狀況下，cors不會攜帶cookie，除非這個值是true

注意：

若是跨域請求要想操做cookie，須要知足3個條件：

• 服務的響應頭中須要攜帶Access-Control-Allow-Credentials而且爲true。

• 瀏覽器發起ajax須要指定withCredentials 爲true

• 響應頭中的Access-Control-Allow-Origin必定不能爲*，必須是指定的域名

特殊請求

不符合簡單請求的條件，會被瀏覽器斷定爲特殊請求,，例如請求方式爲PUT。

預檢請求

特殊請求會在正式通訊以前，增長一次HTTP查詢請求，稱爲"預檢"請求（preflight）。

瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及可使用哪些HTTP動詞和頭信息字段。只有獲得確定答覆，瀏覽器纔會發出正式的XMLHttpRequest請求，不然就報錯。

一個「預檢」請求的樣板：

OPTIONS /cors HTTP/1.1
Origin: http://manage.ly.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之外，多了兩個頭：

• Access-Control-Request-Method：接下來會用到的請求方式，好比PUT

• Access-Control-Request-Headers：會額外用到的頭信息

預檢請求的響應

服務的收到預檢請求，若是許可跨域，會發出響應：

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.ly.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個頭：

• Access-Control-Allow-Methods：容許訪問的方式

• Access-Control-Allow-Headers：容許攜帶的頭

• Access-Control-Max-Age：本次許可的有效時長，單位是秒，過時以前的ajax請求就無需再次進行預檢了

若是瀏覽器獲得上述響應，則認定爲能夠跨域，後續就跟簡單請求的處理是同樣的了。

 

實現很是簡單

雖然原理比較複雜，可是前面說過：

• 瀏覽器端都有瀏覽器自動完成，咱們無需操心

• 服務端能夠經過攔截器統一實現，沒必要每次都去進行跨域斷定的編寫。

事實上，SpringMVC已經幫咱們寫好了CORS的跨域過濾器：CorsFilter ,內部已經實現了剛纔所講的斷定邏輯，咱們直接用就行了。

在ly-api-gateway中編寫一個配置類，而且註冊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.ly.com");
        //2) 是否發送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);
    }
}

　　

結構：

4.5.4.重啓測試：

訪問正常：