国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

什么是跨域以及幾種簡單解決方案

zhaofeihao / 529人閱讀

摘要：什么是跨域要明白什么是跨域之前，首先要明白什么是同源策略同源策略就是用來限制從一個源加載的文檔或腳本與來自另一個源的資源進行交互。最后，解決跨域問題還有一個更通用更強大的方法，我多帶帶把它拿出來總結了一篇文章跨域問題的根本解決方案。

什么是跨域？

要明白什么是跨域之前，首先要明白什么是同源策略？

同源策略就是用來限制從一個源加載的文檔或腳本與來自另一個源的資源進行交互。那怎樣判斷是否是同源呢？

如果協議，端口（如果指定了）和主機對于兩個頁面是相同的，則兩個頁面具有相同的源，也就是同源。也就是說，要同時滿足以下3個條件，才能叫同源：

協議相同

端口相同

主機相同

舉個例子就一目了然了：

我們來看下面的頁面是否與 http://store.company.com/dir/index.html 是同源的？

http://store.company.com/dir/index2.html 同源

http://store.company.com/dir2/index3.html 同源 雖然在不同文件夾下

https://store.company.com/secure.html 不同源 不同的協議(https)

http://store.company.com:81/dir/index.html 不同源 不同的端口(81)

http://news.company.com/dir/other.html 不同源 不同的主機(news)

所以當面對跨域問題的時候，有什么解決方案呢？

跨域的幾種解決方案 document.domain方法

我們來看一個具體場景：有一個頁面 http://www.example.com/a.html ，它里面有一個iframe，這個iframe的源是 http://example.com/b.html ，很顯然它們是不同源的，所以我們無法在父頁面中操控子頁面的內容。

解決方案如下：

所以我們只要將兩個頁面的document.domain設置成一致就可以了，要注意的是，document.domain的設置是有限制的，我們只能把document.domain設置成自身或更高一級的父域。

但是，這種方法只能解決主域相同的跨域問題。

window.name方法

window對象有個name屬性，該屬性有個特征：即在一個窗口(window)的生命周期內,窗口載入的所有的頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的所有頁面中的，并不會因新頁面的載入而進行重置。

我們來看一個具體場景，在一個頁面 example.com/a.html 中，我們想獲取 data.com/data.html 中的數據，以下是解決方案：
JSONP方法

JONSP(JSON with Padding)是JSON的一種使用模式。基本原理如下：

這時候在a.html中我們得到了一條js的執行語句dealData("data")，從而達到了跨域的目的。

所以JSONP的原理其實就是利用引入script不限制源的特點，把處理函數名作為參數傳入，然后返回執行語句，仔細閱讀以上代碼就可以明白里面的意思了。

如果在jQuery中用JSONP的話就更加簡單了：

注意jQuery會自動生成一個全局函數來替換callback=?中的問號，之后獲取到數據后又會自動銷毀，實際上就是起一個臨時代理函數的作用。$.getJSON方法會自動判斷是否跨域，不跨域的話，就調用普通的ajax方法；跨域的話，則會以異步加載js文件的形式來調用JSONP的回調函數。

總結

除了上述方法外，HTML5還新增了一個window.postMessage()方法，有興趣的可以自行查閱。

最后，解決跨域問題還有一個更通用更強大的CORS方法，我多帶帶把它拿出來總結了一篇文章：跨域問題的根本解決方案CORS 。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/107469.html

相關文章

  • 九種跨域方式實現原理（完整版）

    摘要：二跨域解決方案原理利用標簽沒有跨域限制的漏洞，網頁可以得到從其他來源動態產生的數據。使用反向代理實現跨域，是最簡單的跨域方式。 前言 前后端數據交互經常會碰到請求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內容。 本文完整的源代碼請猛戳github博客，紙上得來終覺淺，建議動手敲敲代碼 一、什么是跨域？ 1.什么是同源策略及其限制內容？ 同源策略是一種約定，它是瀏覽器最核心...

    edgardeng 評論0 收藏0

  • 九種跨域方式實現原理（完整版）

    摘要：二跨域解決方案原理利用標簽沒有跨域限制的漏洞，網頁可以得到從其他來源動態產生的數據。使用反向代理實現跨域，是最簡單的跨域方式。 前言 前后端數據交互經常會碰到請求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內容。 本文完整的源代碼請猛戳github博客，紙上得來終覺淺，建議動手敲敲代碼 一、什么是跨域？ 1.什么是同源策略及其限制內容？ 同源策略是一種約定，它是瀏覽器最核心...

    justCoding 評論0 收藏0

  • ajax跨域，這應該是最全的解決方案了

    摘要：關于，強烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個實現原理圖簡化版如何判斷是否是簡單請求瀏覽器將請求分成兩類簡單請求和非簡單請求。 前言 從剛接觸前端開發起，跨域這個詞就一直以很高的頻率在身邊重復出現，一直到現在，已經調試過N個跨域相關的問題了，16年時也整理過一篇相關文章，但是感覺還是差了點什么，于是現在重新梳理了一下。 個人見識有限，如有差錯，請多多見諒，歡迎提出iss...

    ytwman 評論0 收藏0

  • 跨域理解

    摘要：什么是跨域個人一句話解釋如果與不同源，那么頁面不能獲取頁面的資源。所以用同源策略來限制跨域是必須的。它是標準，是跨源請求的根本解決方法。 本文整理了一些有關跨域的基礎知識和細節問題。 什么是跨域 個人一句話解釋：如果 url A 與 url B 不同源，那么頁面A不能獲取頁面B的資源。這里有兩個關鍵詞：url 和 同源，瀏覽器的同源策略就是針對兩個url，它們滿足以下三個條件，才是同源...

    zhongmeizhi 評論0 收藏0

  • 關于跨域簡單總結

    摘要：開發者需要在中設置屬性為跨域是的簡稱這是一種利用瀏覽器漏洞解決跨域的辦法腳本元素可以不受瀏覽器同源策略的限制。 什么是瀏覽器同源策略? 同源是指,域名,協議,端口號均相同,如圖: showImg(https://segmentfault.com/img/bV9rAO?w=1088&h=394); 注意:localhost和127.0.0.1雖然都指向本機,但也是跨域. 瀏覽器同源策略(...

    learning 評論0 收藏0

發表評論

0條評論

zhaofeihao

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<