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

下載本文檔

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

文檔簡(jiǎn)介

1、前端解決跨域問(wèn)題的8種方案（最新最全）2013-10-31 19:25 閱讀(933) 評(píng)論(8) 編輯 收藏1.同源策略如下：URL說(shuō)明是否允許通信同一域名下允許同一域名下不同文件夾允許:8000/a.js同一域名，不同端口不允許同一域名，不同協(xié)議不允許4/b.js域名和域名對(duì)應(yīng)ip不允許主域相同，子域不同不允許同一域名，不同二級(jí)域名（同上）不允許（cookie這種情況下也不允許訪問(wèn)）不同域名不允許特別注意兩點(diǎn)：第一，如果是協(xié)議和端口造成的跨域問(wèn)題“前臺(tái)”是無(wú)能為力的，第二：在跨域問(wèn)題上，域僅僅是通過(guò)“URL的首部”來(lái)識(shí)別而不會(huì)去

2、嘗試判斷相同的ip地址對(duì)應(yīng)著兩個(gè)域或兩個(gè)域是否在同一個(gè)ip上?！癠RL的首部”指tocol +window.location.host，也可以理解為“Domains, protocols and ports must match”。2. 前端解決跨域問(wèn)題1> document.domain + iframe      (只有在主域相同的時(shí)候才能使用該方法)1) 在document.domain = ''var ifr = document.createElement('iframe');i

3、fr.src = 'ifr.display = none;document.body.appendChild(ifr);ifr.onload = function() var doc = ifr.contentDocument | ifr.contentWindow.document; /在這里操作doc，也就是b.html ifr.onload = null;2) 在document.domain = '' 2> 動(dòng)態(tài)創(chuàng)建script這個(gè)沒(méi)什么好說(shuō)的，因?yàn)閟cript標(biāo)簽不受同源策略的限制。function loadScript(url, func)

4、var head = document.head | document.getElementByTagName('head')0; var script = document.createElement('script'); script.src = url; script.onload = script.onreadystatechange = function() if(!this.readyState | this.readyState='loaded' | this.readyState='complete') func(

5、); script.onload = script.onreadystatechange = null; ; head.insertBefore(script, 0);window.baidu = sug: function(data) console.log(data); loadScript('/我們請(qǐng)求的內(nèi)容在哪里？/我們可以在chorme調(diào)試面板的source中看到script引入的內(nèi)容 3> location.hash + iframe原理是利用location.hash來(lái)進(jìn)行傳值。假設(shè)域名下的文件cs1.html要和域名下的cs2.html傳遞信息。1) c

6、s1.html首先創(chuàng)建自動(dòng)創(chuàng)建一個(gè)隱藏的iframe，iframe的src指向域名下的cs2.html頁(yè)面2) cs2.html響應(yīng)請(qǐng)求后再將通過(guò)修改cs1.html的hash值來(lái)傳遞數(shù)據(jù)3) 同時(shí)在cs1.html上加一個(gè)定時(shí)器，隔一段時(shí)間來(lái)判斷l(xiāng)ocation.hash的值有沒(méi)有變化，一旦有變化則獲取獲取hash值注：由于兩個(gè)頁(yè)面不在同一個(gè)域下IE、Chrome不允許修改parent.location.hash的值，所以要借助于域名下的一個(gè)代理iframe代碼如下：先是下的文件cs1.html文件：function startRequest() var ifr = document.cre

7、ateElement('iframe'); ifr.style.display = 'none' ifr.src = ' document.body.appendChild(ifr);function checkHash() try var data = location.hash ? location.hash.substring(1) : '' if (console.log) console.log('Now the data is '+data); catch(e) ;setInterval(checkHash,

8、2000);域名下的cs2.html:/模擬一個(gè)簡(jiǎn)單的參數(shù)處理操作switch(location.hash) case '#paramdo': callBack(); break; case '#paramset': /do something break;function callBack() try parent.location.hash = 'somedata' catch (e) / ie、chrome的安全機(jī)制無(wú)法修改parent.location.hash， / 所以要利用一個(gè)中間的cnblogs域下的代理iframe var if

9、rproxy = document.createElement('iframe'); ifrproxy.style.display = 'none' ifrproxy.src = ' / 注意該文件在""域下 document.body.appendChild(ifrproxy); 下的域名cs3.html/因?yàn)閜arent.parent和自身屬于同一個(gè)域，所以可以改變其location.hash的值parent.parent.location.hash = self.location.hash.substring(1); 

10、4> + 的美妙之處：name 值在不同的頁(yè)面（甚至不同域名）加載后依舊存在，并且可以支持非常長(zhǎng)的 name 值（2MB）。1) 創(chuàng)建2) 創(chuàng)建<head> <script> function proxy(url, func) var isFirst = true, ifr = document.createElement('iframe'), loadFunc = function() if(isFirst) ifr.contentWindow.location = ' isFi

11、rst = false; else func(ifr.contentW); ifr.contentWindow.close(); document.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; document.body.a

12、ppendChild(iframe); </script></head><body> <script> proxy(' function(data) console.log(data); ); </script></body>3 在<script> = '要傳送的內(nèi)容'</script> 5> postMessage（HTML5中的XMLHttpRequest Level 2中的API）1) <iframe id="if

13、r" src="<script type="text/javascript">window.onload = function() var ifr = document.getElementById('ifr'); var targetOrigin = '' / 若寫(xiě)成' / 若寫(xiě)成''就不會(huì)執(zhí)行postMessage了 ifr.contentWindow.postMessage('I was there!', targetOrigin);</script>2

14、) <script type="text/javascript"> window.addEventListener('message', function(event) / 通過(guò)origin屬性判斷消息來(lái)源地址 if (event.origin = '') alert(event.data); / 彈出"I was there!" alert(event.source); / 對(duì)、index.html中window對(duì)象的引用 / 但由于同源策略，這里event.source不可以訪問(wèn)window對(duì)象 , fal

15、se);</script>6> CORSCORS背后的思想，就是使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通，從而決定請(qǐng)求或響應(yīng)是應(yīng)該成功，還是應(yīng)該失敗。IE中對(duì)CORS的實(shí)現(xiàn)是xdrvar xdr = new XDomainRequest();xdr.onload = function() console.log(xdr.responseText);xdr.open('get', '');.xdr.send(null);其它瀏覽器中的實(shí)現(xiàn)就在xhr中var xhr = new XMLHttpRequest();xhr.onreadysta

16、techange = function () if(xhr.readyState = 4) if(xhr.status >= 200 && xhr.status < 304 | xhr.status = 304) console.log(xhr.responseText); xhr.open('get', '');.xhr.send(null);實(shí)現(xiàn)跨瀏覽器的CORSfunction createCORS(method, url) var xhr = new XMLHttpRequest(); if('withCredenti

17、als' in xhr) xhr.open(method, url, true); else if(typeof XDomainRequest != 'undefined') var xhr = new XDomainRequest(); xhr.open(method, url); else xhr = null; return xhr;var request = createCORS('get', '');if(request) request.onload = function() . ; request.send();7>

18、JSONPJSONP包含兩部分：回調(diào)函數(shù)和數(shù)據(jù)。回調(diào)函數(shù)是當(dāng)響應(yīng)到來(lái)時(shí)要放在當(dāng)前頁(yè)面被調(diào)用的函數(shù)。數(shù)據(jù)就是傳入回調(diào)函數(shù)中的json數(shù)據(jù)，也就是回調(diào)函數(shù)的參數(shù)了。function handleResponse(response) console.log('The responsed data is: '+response.data);var script = document.createElement('script');script.src = 'document.body.insertBefore(script, document.body.firstChild);/*handleResonse("data": "zhe")*/原理如下：/當(dāng)我們通過(guò)script

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論