跨域訪問實現依據
首先要弄清楚域是含義。這裡引用百度知道里的域的一個概念說明:
域(Domain)是Windows網路中獨立執行的單位,域之間相互訪問則需要建立信任關係(即Trust Relation)。信任關係是連線在域與域之間的橋樑。當一個域與其他域建立了信任關係後,2個域之間不但可以按需要相互進行管理,還可以跨網分配檔案和印表機等裝置資源,使不同的域之間實現網路資源的共享與管理。
有一種簡明的說法來解釋廣域跨域:跨域訪問,簡單來說就是 A 網站的 javascript 程式碼試圖訪問 B 網站,包括提交內容和獲取內容。由於安全原因,跨域訪問是被各大瀏覽器所預設禁止的。
在廣域網環境中,由於瀏覽器的安全限制,網路連線的跨域訪問時不被允許的,XmlHttpRequest也不例外。但有時候跨域訪問資源是必需的。
同源策略阻止從一個域上載入的指令碼獲取或操作另一個域上的文件屬性。也就是說,受到請求的 URL 的域必須與當前 Web 頁面的域相同。這意味著瀏覽器隔離來自不同源的內容,以防止它們之間的操作。同源策略不阻止將動態指令碼元素插入文件中。
參考理論一:在瀏覽器中不能直接來跨域訪問,而在伺服器端沒有跨域安全限制。
這樣的話,可以在服務端完成跨域訪問,而在客戶端來取得結果就可以了。
參考理論二:同源策略不阻止動態指令碼元素插入,指令碼訪問可以跨域。
以下直接引用:
具體情況有:
一、本域和子域的相互訪問: www.aa.com和book.aa.com
二、本域和其他域的相互訪問: www.aa.com和www.bb.com 用 iframe
三、本域和其他域的相互訪問: www.aa.com和www.bb.com 用 XMLHttpRequest訪問代理
四、本域和其他域的相互訪問: www.aa.com和www.bb.com 用 JS建立動態指令碼
解決方法:
一、如果想做到資料的互動,那麼www.aa.com和book.aa.com必須由你來開發才可以。可以將book.aa.com用iframe新增到 www.aa.com的某個頁面下,在www.aa.com和iframe裡面都加上document.domain = “aa.com”,這樣就可以統一域了,可以實現跨域訪問。就和平時同一個域中鑲嵌iframe一樣,直接呼叫裡面的JS就可以了。(這個辦法我沒有嘗試,不過理論可行)
二、當兩個域不同時,如果想相互呼叫,那麼同樣需要兩個域都是由你來開發才可以。用iframe可以實現資料的互相呼叫。解決方案就是用window.location物件的hash屬性。hash屬性就是http://domian/web/a.htm#dshakjdhsjka 裡面的#dshakjdhsjka。利用JS改變hash值網頁不會重新整理,可以這樣實現通過JS訪問hash值來做到通訊。不過除了IE之外其他大部分瀏覽器只要改變hash就會記錄歷史,你在前進和後退時就需要處理,非常麻煩。不過再做簡單的處理時還是可以用的。大體的過程是頁面a和頁面b在不同域下,b通過iframe新增到a裡,a通過JS修改iframe的hash值,b裡面做一個監聽(因為JS只能修改hash,資料是否改變只能由b自己來判斷),檢測到b的hash值被修改了,得到修改的值,經過處理返回a需要的值,再來修改a的hash值(這個地方要注意,如果a 本身是那種查詢頁面的話比如http://domian/web/a.aspx?id=3,在b中直接parent.window.location是無法取得資料的,同樣報沒有許可權的錯誤,需要a把這個傳過來,所以也比較麻煩),同樣a裡面也要做監聽,如果hash變化的話就取得返回的資料,再做相應的處理。
三、這種情形是最經常遇到的,也是用的最多的了。就是www.aa.com和www.bb.com你只能修改一個,也就是另外一個是別人的,人家告訴你你要取得資料就訪問某某連線引數是什麼樣子的,最後返回資料是什麼格式的。而你需要做的就是在你的域下新建一個網頁,讓伺服器去別人的網站上取得資料,再返回給你。domain1下的a向同域下的GetData.aspx請求資料,GetData.aspx向domain2下的 ResponseData.aspx傳送請求,ResponseData.aspx返回資料給GetData.aspx, GetData.aspx再返回給a,這樣就完成了一次資料請求。GetData.aspx在其中充當了代理的作用。
四、這個和上個的區別就是請求是使用<script>標籤來請求的,這個要求也是兩個域都是由你來開發才行。原理就是JS檔案注入,在本域內的a 內生成一個JS標籤,它的SRC指向請求的另外一個域的某個頁面b,b返回資料即可,可以直接返回JS的程式碼。因為script的src屬性是可以跨域的。
總結:
第一種情況:域和子域的問題,可以完全解決互動。
第二種情況:跨域,實現過程非常麻煩,需要兩個域開發者都能控制,適用於簡單互動。
第三種情況:跨域,開發者只控制一個域即可,實現過程需要增加代理取得資料,是常用的方式。
第四種情況:跨域,兩個域開發者都需要控制,返回一段js程式碼。
參考:
http://blog.csdn.net/axzywan/archive/2009/01/19/3837311.aspx
http://www.liehuo.net/a/200912/0111192.html
http://www.ibm.com/developerworks/cn/web/wa-aj-jsonp1/index.html#intro
相關文章
- JavaScript 跨域訪問(API介面)實現原理分析JavaScript跨域API
- localStorage 跨域訪問跨域
- 跨源通訊、跨域訪問跨域
- iframe 元素跨域訪問跨域
- SpringMVC+RestFul詳細示例實戰教程(實現跨域訪問)SpringMVCREST跨域
- 同源策略和跨域訪問跨域
- 什麼是瀏覽器跨域訪問操作?JS如何實現?瀏覽器跨域JS
- Laravel API 允許跨域訪問LaravelAPI跨域
- SQL Server跨庫跨伺服器訪問實現SQLServer伺服器
- 解決JS跨域訪問的問題JS跨域
- ASP.NET MVC & WebApi 中實現Cors來讓Ajax可以跨域訪問ASP.NETMVCWebAPICORS跨域
- vue_cli3.x 跨域訪問Vue跨域
- spring boot解決跨域訪問配置Spring Boot跨域
- springboot配置CORS允許跨域訪問Spring BootCORS跨域
- 防止跨域問題無法訪問網址跨域
- 阿里雲圖片跨域訪問設定阿里跨域
- Nginx解決前端訪問資源跨域問題Nginx前端跨域
- Angular應用解決跨域訪問的問題Angular跨域
- 跨域問題(普通跨域和springsecurity跨域)跨域SpringGse
- 解決Django本地介面不能跨域訪問的問題Django跨域
- 實戰前端跨域問題前端跨域
- 跨域訪問是什麼!怎麼解決?跨域
- PHP 設定多域名允許跨域訪問PHP跨域
- 解決uniapp h5 本地代理實現跨域訪問及如何配置開發環境APPH5跨域開發環境
- JSONP 跨域原理及實現JSON跨域
- 九種方式實現跨域跨域
- Nginx反向代理實現跨域Nginx跨域
- 跨域問題跨域
- 分享跨域訪問的解決方案與基礎分析跨域
- 搞懂:前端跨域問題JS解決跨域問題VUE代理解決跨域問題原理前端跨域JSVue
- 跨域方案總結與實現跨域
- 九種跨域方式實現原理跨域
- 多種跨域方式實現原理跨域
- vue---axios實現資料互動與跨域問題VueiOS跨域
- 詳解瀏覽器跨域訪問的幾種辦法瀏覽器跨域
- Nginx跨域問題Nginx跨域
- js -- 跨域問題JS跨域
- 前端跨域問題前端跨域
- springboot 跨域問題Spring Boot跨域