跨域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時必須
...
主要注意的是引數 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" , "*");
...
}
- 通過在響應 header 中設定 ‘*’ 來允許來自所有域的跨域請求訪問。
response.setHeader("Access-Control-Allow-Origin", "*");
- 只允許來自特定域
http://my.domain.cn:8080
的跨域訪問
response.setHeader("Access-Control-Allow-Origin", "http://my.domain.cn:8080");
- 較靈活的設定方式,允許所有包含
mydomain.com
的域名訪問.
if(request.getHeader("Origin").contains("mydomain.com" )) {
response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
}
2. 帶Cookie的跨域Ajax請求
客戶端
$.ajax({
url : 'http://remote.domain.com/corsrequest',
data : data,
dataType: 'json',
type : 'POST',
xhrFields: {
withCredentials: true
},
crossDomain: true,
contentType: "application/json",
...
通過設定 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");
...
}
對應客戶端的 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 衝突。
withCredentials:
預設情況下,跨源請求不提供憑據(cookie、HTTP認證及客戶端SSL證明等)。通過將withCredentials屬性設定為true,可以指定某個請求應該傳送憑據。如果伺服器接收帶憑據的請求,會用下面的HTTP頭部來響應。Access-Control-Allow-Credentials: true。
如果傳送的是帶憑據的請求,但伺服器的相應中沒有包含這個頭部,那麼瀏覽器就不會把相應交給JavaScript(於是,responseText中將是空字串,status的值為0,而且會呼叫onerror()事件處理程式)。另外,伺服器還可以在Preflight響應中傳送這個HTTP頭部,表示允許源傳送帶憑據的請求。
支援withCredentials屬性的瀏覽器有Firefox 3.5+、Safari 4+和Chrome。IE10及更早版本都不支援。