在web程式設計中我們經常會遇到跨域的問題。預設情況下,瀏覽器是不允許跨域訪問的。所以說,在這裡就有乙個概念:cors(cross-origin resource sharing)跨域資源共享。
在html5標準出來之前,cors是不被允許的。但是為了達到跨域訪問資源的目的,出現了很多較麻煩的方式:jsonp、**檔案、位址列hash等等。隨著html5的出現,cors為我們解決了乙個**煩。
cors的用途比較廣泛,最近在做sso的時候同樣也用到了cors。對於cors的詳細介紹我們大家可以參考阮一峰老師的《跨域資源共享cors詳解》這篇文章。在這裡我們只介紹以下兩種情況。
ajax跨域簡單訪問
要想實現跨域訪問,首先我們要清楚cors實現跨域訪問最重要的一點就是設定access-control-allow-origin這個引數。
假如我有兩個站點
www.onmpw.com
www.jiyibk.com
我在onmpw站點上通過ajax訪問jiyibk。
$.ajax(,
success:function(data),
error:function(err)
})如果我們不做任何設定,就會出現禁止跨域訪問的提示
那要解決這個問題,我們需要用到http請求頭中的origin引數。
origin這個引數代表的是**站點。因此我們只需要在jiyibk服務端對access-control-allow-origin進行設定,其允許的**就是請求頭中的origin選項值。
只需要設定服務端即可,在客戶端不用進行其他的設定就可以實現跨域訪問了。不過,上面的設定僅僅是可以跨域訪問,對於cookie還是不能跨域設定和讀取。接下來我們就來進行cookie跨域的設定。
ajax跨域cookie設定
上面我們已經實現了ajax跨域訪問了,但是還是不能進行cookie的設定。要想實現跨域cookie的設定,我們還需要對cors的另乙個重要的引數access-control-allow-credentials進行設定。
和上面的設定不同的是,此項不僅僅是在服務端設定,還需要再客戶端也進行設定。
客戶端如下:
$.ajax(,
datatype:'json',
type:'post',
data:,
success:function(data),
error:function(err)
})通過jquery的ajax設定還是比較簡單的。只是加上xhrfields: ,這一項客戶端就可以說是設定完成了。
接下來是在jiyibk服務端:
經過以上的設定就可以進行cookie跨域設定了。
cors對於我們開發web應用提供了很大的方便。本文只是簡單介紹了ajax跨域設定cookie的問題,對於其他深層次的東西還有待於大家去探索。總之,希望本文能給大家一些幫助
原文:
ajax跨域與cookie跨域
ajax跨域取資料 利用可以跨域載入js的原理 functioncallback 這是需要返回這樣乙個js函式 ajax資料型別使用jsonp 如 ajax url callbask x datatype jsonp type get 在使用資料型別為jsonp時,jquery自動會在url路徑上拼...
ajax 跨域攜帶COOKIE
背景 專案中用pdf.js外掛程式開啟pdf流文件 這個問題屬於ajax跨域攜帶cookie的問題,找了一篇博文的解決方案。1,原生ajax請求方式 xhr.withcredentials true 支援跨域傳送cookies xhr.send 2,jquery的方法請求 ajax crossdom...
跨域Ajax請求時是否帶Cookie的設定
以 jquery 的 ajax 為例 ajax crossdomain true,xhrfields success function data error err 主要注意的是引數 crossdomain true。傳送ajax時,request header 中會包含跨域的額外資訊,但不會含co...