在項目中遇到一個問題,與Ajax的跨域相關,具體問題描述如下:
在客戶端的JS,使用ajax和服務器進行交互,出現的是
Access to restricted URI denied" code: "1012
[Break on this error] ajaxreq.open("GET",filename);
問題,如果此html以及JS文件放到服務器端,則不會出現問題,就是ajax跨域問題。但是此項目的需求不能將此html及Js文件放到服務器端,只能放到本地,從網上查看了很多資料,感覺在本地搭建一個服務器比較靠譜,將html放到本地服務器(這樣可以進行一些本地操作,比如讀本地的文件),這樣架構就變成這樣了:
?
?
對于Ajax跨域的問題,通過網上的資料學習,現總結如下:
1.什么引起了ajax跨域問題
ajax本身是通過xmlHttpRequest對象來進行數據的交互,而瀏覽器處于安全的考慮,不允許JS代碼進行跨域操作,所以會警告。
2.解決方案需要根據具體情況具體解決
一 、本域和子域的相互互訪: www.aa.com 和book.aa.com
二、本域和其他域的訪問: www.aa.com 和 www.bb.com 用ifram
三、本域和其他域的相互訪問: www.aaa.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 和ifram里面都加上document.domain = "aa.com",這樣就可以統一域了,直接調用JS即可。
二、可以使用window.location對象的hash屬性。這個感覺有點亂。hash屬性就是 http://domain/web/a.htm#dsha 里面#后面的部分。利用JS改變hash網頁不會刷新,可以這樣通過JS訪問hash值來做到通信。大體的過程是頁面a和頁面b在不同域下,b通過iframe添加到a里,a通過JS修改iframe的hash值,b里面做一個監聽(應為JS只能修改hash,數據是否改變只能由b自己來判斷),檢測到b的hash值被修改了,得到修改的值,經過處理返回a需要的值,再來修改a的hash值,同樣a里面也要做監聽,如果hash變化的話就取得返回
三、 www.aa.com 和 www.bb.com ,假如說你要取得數據就訪問某某鏈接參數是什么樣子的等等,最后返回的數據是什么格式的,而你需要做的就是在你的域下( www.aa.com )新建一個網頁,讓服務器去別人的網站上獲取數據,再返回給你。比如domain1的a向同域下的RouteServlet請求數據,RouteServlet向domain2下的getRouteServlet發送請求,Domain2將數據返回給RouteServlet,RouteServlet再返回給a,這樣就完成了一次數據請求,RouteSrevlet在當中充當了代理的作用。
四、這個是用<script>標簽來請求的,原理就是JS文件注入,在本域內的a內生成一個JS標簽,他的src指向請求的另外一個域的某個頁面b,b返回數據即可。
簡單來說,
第一種情況:域和子域的問題,可以完全解決交互。
第二種情況:跨域,實現過程比較復雜,需要兩個域的開發者都能控制,適用于簡單交互。
第三種情況:跨域,開發者只控制一個域即可,實現過程需要增加代理取得數據,是常用的方式。
第四種情況:跨域,兩個域開發者都需要控制,返回一段JS代碼。
?
?
?
?
?
?
?
?
?
?
?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
