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

來源:互聯網
上載者:User

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

1、使用代理將需要跨域的地址掛載到本域下面

2、使用jsonp

3、使用Access-Control-Allow-Origin回應標頭


第一種方案需要引入Proxy 伺服器,生產環境中一般都會用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代表開啟跨域認證,這樣會增加一個回應標頭 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帶上


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.