天天看點

ajax跨域解決方案以及spring mvc中的支援

ajax跨域問題主要有有三種解決方法

1、使用代理将需要跨域的位址挂載到本域下面

2、使用jsonp

3、使用Access-Control-Allow-Origin響應頭

第一種方案需要引入代理伺服器,生産環境中一般都會用nginx或者apache http做負載均衡,可以很容易實作,自己的開發環境一般都沒有這東西,需要引入,增加了複雜性

第二種方案需要修改傳回的資料,跨域請求的響應需要封裝成callback('{a:''b"}')的格式

第三種是W3C為解決跨域問題引入的新特性(好像是HTML5引入的),目前大部分教新的浏覽器都支援,隻需要在響應頭中加入Access-Control-Allow-Origin就可實作跨域

springmvc4.2開始提供開箱即用的跨域支援,隻需要在mvc的配置檔案中加入以下代碼,詳細的配置參考官方文檔

<mvc:annotation-driven/>

<mvc:cors>

<mvc:mapping path="/**"/>

</mvc:cors>

注意一定要加上<mvc:annotation-driven/>,之前用的是自定義的requestmapping,沒有使用<mvc:annotation-driven/>導緻跨域失敗,調試後才發現,如果沒有<mvc:annotation-driven/>,mvc擷取不到cors的配置資訊

預設情況下,ajax跨域請求是不會攜帶cookies的,有時候我們需要cookies,這時候就要加入跨域認證支援

<mvc:annotation-driven/>

<mvc:cors>

<mvc:mapping path="/rest/**"

allowed-origins="http://localhost"

allow-credentials="true"/>

</mvc:cors>

allow-credentials=true代表開啟跨域認證,這樣會增加一個響應頭

  1. Access-Control-Allow-Credentials: true

allowed-origins代表可以跨域請求的域名,這裡需要注意,如果加入了跨域認證支援,allowed-origins必須是明确的域名,不能使用“*”通配符

浏覽器收到此響應頭。同時用戶端也要做設定,需要将XMLHttpRequest的withCredentials标志設定為true

xhr.withCredentials=true

jquery下為

 $.ajax({

            url: 'data/tree.json',

            xhrFields: {

                withCredentials: true

            }

        }); 

下次請求就會将cookies帶上