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 沖突。