跨域Ajax請求時是否帶Cookie的設置

1. 無關Cookie跨域Ajax請求

客戶端

以 Jquery 的 ajax 爲例：

$.ajax({
        url : 'http://remote.domain.com/corsrequest', data : data, dataType: 'json', type : 'POST', crossDomain: true, contentType: "application/json", // POST時必須 ...

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

主要注意的是參數 crossDomain: true。發送Ajax時，Request header 中會包含跨域的額外信息，但不會含cookie。

服務器端

跨域的容許主要由服務器端控制。服務器端經過在響應的 header 中設置 Access-Control-Allow-Origin 及相關一系列參數，提供跨域訪問的容許策略。相關參數的設置介紹，可參見 [Access_control_CORS]

以Java爲例：

/** * Spring Controller中的方法： */ @RequestMapping(value = "/corsrequest") @ResponseBody public Map<String, Object> mainHeaderInfo(HttpServletResponse response) { response.setHeader("Access-Control-Allow-Origin", "*"); ... }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

• 經過在響應 header 中設置 ‘*’ 來容許來自全部域的跨域請求訪問。

response.setHeader("Access-Control-Allow-Origin", "*");

• 1

• 只容許來自特定域 http://my.domain.cn:8080 的跨域訪問

response.setHeader("Access-Control-Allow-Origin", "http://my.domain.cn:8080");

• 1

• 較靈活的設置方式，容許全部包含 mydomain.com 的域名訪問.

if(request.getHeader("Origin").contains("mydomain.com")) { response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin")); }

• 1
• 2
• 3

---

2. 帶Cookie的跨域Ajax請求

客戶端

$.ajax({
        url : 'http://remote.domain.com/corsrequest', data : data, dataType: 'json', type : 'POST', xhrFields: { withCredentials: true }, crossDomain: true, contentType: "application/json", ...

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

經過設置 withCredentials: true ，發送Ajax時，Request header中便會帶上 Cookie 信息。

服務器端

相應的，對於客戶端的參數，服務器端也須要進行設置：

/** * Spring Controller中的方法： */ @RequestMapping(value = "/corsrequest") @ResponseBody public Map<String, Object> getUserBaseInfo(HttpServletResponse response) { if(request.getHeader("Origin").contains("woego.cn")) { response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin")); } response.setHeader("Access-Control-Allow-Credentials", "true"); ... }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

對應客戶端的 xhrFields.withCredentials: true 參數，服務器端經過在響應 header 中設置 Access-Control-Allow-Credentials = true 來運行客戶端攜帶證書式訪問。經過對 Credentials 參數的設置，就能夠保持跨域 Ajax 時的 Cookie。這裏須要注意的是：

服務器端 Access-Control-Allow-Credentials = true時，參數Access-Control-Allow-Origin 的值不能爲 '*' 。

---

3. Java中使用跨域 Filter

當容許跨域訪問的接口較多時，在每一個請求中都添加 Access-Control-Allow-Origin 顯然是不合適的。對於比較原生的 Java web 應用，使用 Filter 是一個不錯的選擇。

NOTE：不一樣的框架，特別是支持REST的框架，大多提供了本身的跨域設置方式，如Spring4的Config等，能夠優先從使用的框架中尋找支持。

Filter自己很簡單，能夠直接把上面兩句設置 Header 的語句抽取出來寫一個Filter。這裏推薦一個 Tomcat 中的 Filter：org.apache.catalina.filters.CorsFilter。

• 引入 
  這個類在 Tomcat 的 catalina.jar 中，能夠經過將 tomcat/lib 下的 jar 包引用到項目中的方式來使用。但若是你對項目的 jar 環境有’潔癖’, 也能夠單獨把 這個類的 SVN源碼 拷貝到項目中，修改（刪除）一下‘日誌’和‘異常提示內容’的引用就能夠運行在任何原生java web項目中了。

• 設置方法 
  在 web.xml 中設置Filter：

<filter> <filter-name>CorsFilter</filter-name> <filter-class>org.apache.catalina.filters.CorsFilter</filter-class> </filter> <filter-mapping> <filter-name>CorsFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

---

一點補充： 
Filter的 默認 設置包含了：

<filter> <filter-name>CorsFilter</filter-name> <filter-class>org.apache.catalina.filters.CorsFilter</filter-class> <init-param> <param-name>cors.allowed.origins</param-name> <param-value>*</param-value> </init-param> <init-param> <param-name>cors.support.credentials</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>CorsFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

這裏的 cors.allowed.origins 雖然是 ‘*’，但實現上已經被優化，不會與 credentials 衝突。