跨域的緣由,場景,方法

一 跨域的緣由前端

不少朋友不知道爲何要跨域 其實跨域請求存在的緣由:因爲瀏覽器的同源策略,即屬於不一樣域的頁面之間不能相互訪問各自的頁面內容。web

那麼什麼是同源策略呢?chrome

簡單說來就是同協議,同域名,同端口。json

二 跨域的場景後端

1.域名不一樣 www.yangwei.com 和www.wuyu.com 即爲不一樣的域名)跨域

2.二級域名相同,子域名不一樣(www.wuhan.yangwei.com www.shenzheng.yangwei.com 爲子域不一樣)瀏覽器

3.端口不一樣,協議不一樣  ( http://www.yangwei.com 和https://www.yangwei.com屬於跨域www.yangwei.con:8888和www.yangwei.con:8080)服務器

三 跨域的方式dom

1.前端的方式: possMessage,window.name,document.domain,image.src(得不到數據返回),jsonP(script.src後臺不配合得不到數據返回),style.href(得不到數據返回)函數

一.imge.src,script.src,style.href 不受同源策略的影響能夠加載其餘域的資源,能夠用這個特性,向服務器發送數據。最經常使用的就是使用image.src 向服務器發送前端的錯誤信息。image.src 和style.href 是沒法獲取服務器的數據返回的,script.src 服務器端配合能夠獲得數據返回。

二possMessage,window.name,document.domain 是兩個窗口直接相互傳遞數據。

(1)possMessage 是HTML5中新增的,使用限制是 必須得到窗口的window 引用。IE8+支持,firefox,chrome,safair,opera支持

  (2)window.name ,在一個頁面中打開另外一個頁面時,window.name 是共享的,因此能夠經過window.name 來傳遞數據,window.name的限制大小是2M,這個全部瀏覽器都支持,且沒有什麼限制。

3) document.domain 將兩個頁面的document.domain 設置成相同,document.domain 只能設置成父級域名,既能夠訪問,使用限制:這頂級域名必須相同

2.純後端方式: CORS,服務器代理

CORS 是w3c標準的方式,經過在web服務器端設置:響應頭Access-Cntrol-Alow-Origin 來指定哪些域能夠訪問本域的數據,ie8&9(XDomainRequest),10+,chrom4 ,firefox3.5,safair4,opera12支持這種方式。

服務器代理,同源策略只存在瀏覽器端,經過服務器轉發請求能夠達到跨域請求的目的,劣勢:增長服務器的負擔,且訪問速度慢。

3.先後端結合:JsonP

script.src 不受同源策略的限制,因此能夠動態的建立script標籤,將要請求數據的域寫在src 中參數中附帶回調的方法,服務器端返回回調函數的字符串,並帶參數。

如 script.src="http://www.yangwei.com/?id=001&callback=getInfoCallback,服務器端返回 getInfoCallBack("name:yangwei;age:18") 這段代碼會直接執行,在前面定義好getInfoCallBack函數,既能夠得到數據並解析。 這種是最長見的方式。

相關文章
相關標籤/搜索