前端解決跨域問題的8種方案(最新最全)_第1頁
前端解決跨域問題的8種方案(最新最全)_第2頁
前端解決跨域問題的8種方案(最新最全)_第3頁
前端解決跨域問題的8種方案(最新最全)_第4頁
前端解決跨域問題的8種方案(最新最全)_第5頁
已閱讀5頁，還剩7頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

1、前端解決跨域問題的8種方案（最新最全）2013-10-31 19:25 閱讀（933）評論（8）編輯 收藏 1同源策略如下：URL說明是否允許通信 a.js b.js同一域名下允許 lab/a.js script/b.js同一域名下不同文件夾允許:8000/a.js同一域名，不同端口不允許同一域名，不同協(xié) 議不允許4/bjs域名和域名對應(yīng)ip不允許主域相同，子域不 同不允許同一域名，不同二 級域名（同上）不允許（cookie這種情況 下也不允許訪問）http:/www.c 不同域名不允許特別注意兩點(diǎn)：第一，如果是協(xié)議和端口造成的跨域問題前臺”是無能為力的，第二：

2、在跨域問題上，域僅僅是通過“ URL的首部”來識別而不會去嘗試判斷相同的ip地址對應(yīng)著兩個域或兩個域是否在冋一個ip上?！?UR啲首部”旨 window.location .protocol +window.location .host，也可以理解為 “ Domainsprotocols and ports must match。”2.前端解決跨域問題1>docume nt.domai n + iframe（只有在主域相同的時候才能使用該方法）1）在 中：為docume nt.doma in = ''var ifr = docume nt.createEleme nt（&

3、#39;iframe'）;ifr.src = 'http:/www.scripta.eom/b.ht ml'ifr.display = none;docume nt.body.appe ndChild(ifr);ifr.onload = function ()var doc = ifr.c onten tDocume nt |ifr.c ontentWin dow.docume nt;/在這里操作doc,也就是b.htmlifr.onload = null ;陸2) 在 中：docume nt.doma in = ''2動態(tài)創(chuàng)建script這個沒什么好說

4、的，因為script標(biāo)簽不受同源策略的限制。function loadScript(url, func) var head = docume nt.head | docume nt.getEleme ntByTagName('head')O;var script = docume nt.createEleme nt('script');script.src =url;script.onload= script.onreadystatechange =function ()if (! this .readyState | this .readyState='

5、;loaded' |this .readyState='complete' )fun c();script.onload= script.onreadystatechange =null ;head.i nsertBefore(script, 0);wi ndow.baidu = sug: function (data)con sole .lo g(data);loadScript( 'http:/suggesti on. fun cti on ()c on sole .log('loaded' );/我們請求的內(nèi)容在哪里？/我們可以在chorm

6、e調(diào)試面板的source中看到script引入的內(nèi)容3>locati on .hash + iframe原理是利用location.hash來進(jìn)行傳值。假設(shè)域名 下的文件cs1.html要和 域名下的cs2.html傳遞信息。1) cs1.html首先創(chuàng)建自動創(chuàng)建一個隱藏的iframe， iframe的src指向 域名下的cs2.html頁面2) cs2.html響應(yīng)請求后再將通過修改cs1.html的hash值來傳遞數(shù)據(jù)3) 同時在cs1.html上加一個定時器，隔一段時間來判斷l(xiāng)ocation.hash的值有沒有變化，- 旦有變化則獲取獲取 hash值注：由于兩個頁面不在同一個域下I

7、E、Chrome不允許修改 pare nt.locati on .hash 的值，所以要借助于域名下的一個代理iframe代碼如下：先是 下的文件cs1.html文件：function startRequest()var ifr = docume nt.createEleme nt('iframe' );ifr.style.display = 'none'ifr.src = 'http:/www.c nblogs.eom/lab/cscript/cs2.html#paramdo'docume nt.body.appe ndChild(ifr);f

8、unction checkHash() try var data = locati on. hash ? locati on .hash.substri ng(1):”;if (consoleog) con sole .log( 'Now the data is '+ data); catch (e) ;set In terval(checkHash,2000); 域名下的 cs2.html:/模擬一個簡單的參數(shù)處理操作switch (location.hash)case '#paramdo':callBack();break;case '#params

9、et'/do someth ing break;function callBack()try pare nt.locati on .hash= 'somedata' catch (e) / ie 、chrome 的安全機(jī)制無法修改 pare nt.locati on .hash,/所以要利用一個中間的cnblogs域下的代理iframevar ifrproxy = docume nt.createEleme nt('iframe');ifrproxy.style.display = 'none'ifrproxy.src = '/

10、注意該文件在""域下docume nt.body.appe ndChild(ifrproxy); 下的域名 cs3.html/因為parent.parent 和自身屬于同一個域，所以可以改變其location.hash的值pare nt.pare nt.locati on .hash = self .lo cati on .hash.substri ng(1);4> win dow .n ame + 的美妙之處：name值在不同的頁面(甚至不同域名)加載后依舊存在，并 且可以支持非常長的name值(2MB )。1) 創(chuàng)建 2) 創(chuàng)建

11、 ，并加入如下代碼<head><script>fun cti on proxy(url, fun c)var isFirst = true ,ifr = docume nt.createEleme nt('iframe'),loadFunc= function ()if (isFirst)ifr.co ntentWin dow .lo catio n= ' ml' ;isFirst = false ; else fun c(ifr.co ntentWin dow. name);ifr.c on te ntWin dow.close();d

12、ocume nt.body.removeChild(ifr);ifr.src = ” ;ifr = null ;ifr.src =url;ifr.style.display = 'none'if (ifr.attachEvent) ifr.attachEvent('onload', loadFunc);else ifr.onload =loadFunc;docume nt.body.appe ndChild(iframe);</script></head><body><script>proxy( 'func

13、tion (data)con sole .lo g(data););</script></body>3 在 中包含：<script>='要傳送的內(nèi)容'</script>5>postMessage (HTML5 中的 XMLHttpRequest Level 2 中的 API)1) dex.html中的代碼:viframe id="ifr" src="vscript type="text/javascript">window.onload = fun

14、ction () var ifr = docume nt.getEleme ntByld('ifr');vartargetOrigi n = ''/ 若寫成' 效果一樣/ 若寫成''就不會執(zhí)行 postMessage 了ifr.contentWin dow.postMessage('I was there!', targetOrig in);</script>2) ndex.html中的代碼：<script type="text/javascript">window.addEve

15、ntListener( 'message', function (event)/通過origin屬性判斷消息來源地址if (event.origin = '') alert(eve nt.data);/ 彈出"I was there!"alert(event.source);/ 對 、index.html 中 window對象的引用/但由于同源策略，這里event.source不可以訪問window對象, false );</script>6> CORSCORS背后的思想，就是使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通

16、，從而決定請求或響應(yīng)是應(yīng)該成功，還是應(yīng)該失敗。IE中對CORS的實(shí)現(xiàn)是xdrvar xdr = n ewXDoma in Request();xdr.onload = function ()con sole.log(xdr.resp on seText);xdr.open( 'get', '' );xdr.send( null ); 其它瀏覽器中的實(shí)現(xiàn)就在xhr中varxhr = newXMLHttpRequest();xhr.o nreadystatecha nge = function () if (xhr.readyState = 4)if (xhr.st

17、atus>= 200 &&xhr.status< 304 | xhr.status = 304)con sole.log(xhr.resp on seText);xhr.open( 'get', '' );xhr.send( null );實(shí)現(xiàn)跨瀏覽器的CORSfunction createCORS(method, url) varxhr = newXMLHttpRequest();if ('withCredentials' in xhr)xhr.open(method, url,true ); elseif (typ

18、eof XDomain Request != 'undefined')varxhr = n ewXDoma in Request();xhr.open(method, url); else xhr = null ;return xhr;var request = createCORS('get', '');if (request)request.onload = function ();request.se nd();7> JSONPJSONP包含兩部分：回調(diào)函數(shù)和數(shù)據(jù)?；卣{(diào)函數(shù)是當(dāng)響應(yīng)到來時要放在當(dāng)前頁面被調(diào)用的函數(shù)。數(shù)據(jù)就是傳入回調(diào)函數(shù)

19、中的 json數(shù)據(jù)，也就是回調(diào)函數(shù)的參數(shù)了。function handleResponse(response)con soleog( 'The resp on sed data is: '+resp on se.data);var script = docume nt.createEleme nt('script');script.src = ' on/?callback=ha ndleResp on se' docume nt.body.i nsertBefore(script, docume nt.body.firstChild);/*ha ndleReso nse("data": "zhe&

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論