資訊專欄INFORMATION COLUMN
摘要：比如域的頁(yè)面通過(guò)嵌入了一個(gè)域的頁(yè)面，可以通過(guò)以下方法實(shí)現(xiàn)和的通信通過(guò)跨域以上幾種都是雙向通信的，即兩個(gè)，頁(yè)面與或是頁(yè)面與頁(yè)面之間的，下面說(shuō)幾種單項(xiàng)跨域的一般用來(lái)獲取數(shù)據(jù)，因?yàn)橥ㄟ^(guò)標(biāo)簽引入的是不受同源策略的限制的。
跨域整理
@(前端筆記)
只要協(xié)議、域名、端口有任何一個(gè)不同，都被當(dāng)作是不同的域。
由于瀏覽器的同源策略，其限制之一是不能通過(guò)ajax的方法情趣請(qǐng)求不同源的文檔。第二個(gè)限制是瀏覽器中不同域的框架(iframe)間是不能進(jìn)行js的交互操作的。
修改document.domain的方式只適用于不同子域的框架間的交互。
因?yàn)楦复翱诳梢詫?duì)iframe進(jìn)行URL讀寫，iframe也可以讀寫父窗口的URL，URL有一部分被稱為hash，就是#號(hào)及其后面的字符，它一般用于瀏覽器錨點(diǎn)定位，Server端并不關(guān)心這部分，應(yīng)該說(shuō)HTTP請(qǐng)求過(guò)程中不會(huì)攜帶hash，所以這部分的修改不會(huì)產(chǎn)生HTTP請(qǐng)求，但是會(huì)產(chǎn)生瀏覽器歷史記錄。此方法的原理就是改變URL的hash部分來(lái)進(jìn)行雙向通信。每個(gè)window通過(guò)改變其他 window的location來(lái)發(fā)送消息（由于兩個(gè)頁(yè)面不在同一個(gè)域下IE、Chrome不允許修改parent.location.hash的值，所以要借助于父窗口域名下的一個(gè)代理iframe），并通過(guò)監(jiān)聽(tīng)自己的URL的變化來(lái)接收消息。這個(gè)方式的通信會(huì)造成一些不必要的瀏覽器歷史記錄，而且有些瀏覽器不支持onhashchange事件，需要輪詢來(lái)獲知URL的改變，最后，這樣做也存在缺點(diǎn)，諸如數(shù)據(jù)直接暴露在了url中，數(shù)據(jù)容量和類型都有限等。
高級(jí)瀏覽器Internet Explorer 8+, chrome，F(xiàn)irefox , Opera 和 Safari 都將支持這個(gè)功能。這個(gè)功能主要包括接受信息的"message"事件和發(fā)送消息的"postMessage"方法。比如damonare.cn域的A頁(yè)面通過(guò)iframe嵌入了一個(gè)google.com域的B頁(yè)面，可以通過(guò)以下方法實(shí)現(xiàn)A和B的通信
以上幾種都是雙向通信的，即兩個(gè)iframe，頁(yè)面與iframe或是頁(yè)面與頁(yè)面之間的，下面說(shuō)幾種單項(xiàng)跨域的（一般用來(lái)獲取數(shù)據(jù)），因?yàn)橥ㄟ^(guò)script標(biāo)簽引入的js是不受同源策略的限制的。所以我們可以通過(guò)script標(biāo)簽引入一個(gè)js或者是一個(gè)其他后綴形式（如php，jsp等）的文件，此文件返回一個(gè)js函數(shù)的調(diào)用。
JSONP的優(yōu)缺點(diǎn)
SONP的優(yōu)點(diǎn)是：
它不像XMLHttpRequest對(duì)象實(shí)現(xiàn)的Ajax請(qǐng)求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運(yùn)行，不需要XMLHttpRequest或ActiveX的支持；并且在請(qǐng)求完畢后可以通過(guò)調(diào)用callback的方式回傳結(jié)果。
JSONP的缺點(diǎn)則是：
它只支持GET請(qǐng)求而不支持POST等其它類型的HTTP請(qǐng)求；它只支持跨域HTTP請(qǐng)求這種情況，不能解決不同域的兩個(gè)頁(yè)面之間如何進(jìn)行JavaScript調(diào)用的問(wèn)題。
CORS（Cross-Origin Resource Sharing）跨域資源共享，定義了必須在訪問(wèn)跨域資源時(shí)，瀏覽器與服務(wù)器應(yīng)該如何溝通。CORS背后的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進(jìn)行溝通，從而決定請(qǐng)求或響應(yīng)是應(yīng)該成功還是失敗。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。整個(gè)CORS通信過(guò)程，都是瀏覽器自動(dòng)完成，不需要用戶參與。對(duì)于開發(fā)者來(lái)說(shuō)，CORS通信與同源的AJAX通信沒(méi)有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源，就會(huì)自動(dòng)添加一些附加的頭信息，有時(shí)還會(huì)多出一次附加的請(qǐng)求，但用戶不會(huì)有感覺(jué)。
CORS與JSONP的對(duì)比
JSONP只能實(shí)現(xiàn)GET請(qǐng)求，而CORS支持所有類型的HTTP請(qǐng)求。
使用CORS，開發(fā)者可以使用普通的XMLHttpRequest發(fā)起請(qǐng)求和獲得數(shù)據(jù)，比起JSONP有更好的錯(cuò)誤處理。
JSONP主要被老的瀏覽器支持，它們往往不支持CORS，而絕大多數(shù)現(xiàn)代瀏覽器都已經(jīng)支持了CORS）。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/90134.html
摘要：在支持這個(gè)方式的瀏覽器里，的寫法和不跨域的寫法一模一樣，只要服務(wù)器需要設(shè)置這種方式適用于主域相同，子域不同，比如和假如這兩個(gè)域名下各有和在這里操作里的元素?cái)?shù)據(jù)注意需要設(shè)置成自身或更高一級(jí)的父域，且主域必須相同。 打個(gè)招聘廣告： 杭州 阿里巴巴B2B 招前端（想去西溪的也可幫推薦），比較缺人，機(jī)會(huì)多多！廣告位長(zhǎng)期有效，有興趣簡(jiǎn)歷我郵箱：854936875@qq.com 此文章學(xué)習(xí)借鑒了一...
摘要：什么是跨域要明白什么是跨域之前，首先要明白什么是同源策略同源策略就是用來(lái)限制從一個(gè)源加載的文檔或腳本與來(lái)自另一個(gè)源的資源進(jìn)行交互。最后，解決跨域問(wèn)題還有一個(gè)更通用更強(qiáng)大的方法，我單獨(dú)把它拿出來(lái)總結(jié)了一篇文章跨域問(wèn)題的根本解決方案。 什么是跨域？ 要明白什么是跨域之前，首先要明白什么是同源策略？ 同源策略就是用來(lái)限制從一個(gè)源加載的文檔或腳本與來(lái)自另一個(gè)源的資源進(jìn)行交互。那怎樣判斷是否是同...
摘要：例外當(dāng)涉及到同源策略時(shí)，有兩個(gè)主要的例外授信范圍兩個(gè)相互之間高度互信的域名，如公司域名，不遵守同源策略的限制。端口未將端口號(hào)加入到同源策略的組成部分之中，因此和屬于同源并且不受任何限制。 原文鏈接：http://www.devsai.com/2016/11/24/talk-CORS/ 同源策略（same origin policy） 1995年，同源政策由 Netscape 公司引入瀏...
摘要：服務(wù)端接收到請(qǐng)求后，通過(guò)該參數(shù)獲得回調(diào)函數(shù)名，并將數(shù)據(jù)放在參數(shù)中將其返回收到結(jié)果后因?yàn)槭菢?biāo)簽，所以瀏覽器會(huì)當(dāng)做是腳本進(jìn)行運(yùn)行，從而達(dá)到跨域獲取數(shù)據(jù)的目的。 在使用Vue搭建的一個(gè)后端管理系統(tǒng)中，我使用axios請(qǐng)求本地的Node環(huán)境下的接口，但是請(qǐng)求失敗，然后我錯(cuò)誤信息是：showImg(https://segmentfault.com/img/remote/1460000018521...
摘要：本文主要是關(guān)于跨域的幾種方式，關(guān)于什么是跨域這里就不多說(shuō)了，寫這個(gè)也是為了記住一些知識(shí)點(diǎn)的。我自己用和的寫過(guò)一些，但是沒(méi)有在實(shí)際工作中用過(guò)，所以對(duì)這一塊了解不深。 本文主要是關(guān)于跨域的幾種方式，關(guān)于什么是跨域這里就不多說(shuō)了，寫這個(gè)也是為了記住一些知識(shí)點(diǎn)的。 一. jsonp jsonp的跨域方式很容易理解，頁(yè)面的的每一個(gè)script標(biāo)簽瀏覽器都會(huì)發(fā)送get請(qǐng)求獲取對(duì)應(yīng)的文本資源，獲取到...
閱讀 2102·2021-11-15 18:09
閱讀 980·2021-09-06 15:13
閱讀 2692·2021-08-23 09:43
閱讀 2070·2019-08-30 15:54
閱讀 2262·2019-08-30 13:56
閱讀 2534·2019-08-26 11:31
閱讀 3129·2019-08-26 10:56
閱讀 802·2019-08-26 10:28
