轉自:http://www.zuidaima.com/share/1854884509142016.htm
在做項目的時候遇到跨域問題,經過自己的一番摸索終於找到一種解決iframe跨域問題的方案,或許很多人也會遇到這樣頭疼的問題,希望能儘自己綿薄之力幫助大家。如果不清楚或者有問題的可以留言和私信我,謝謝。
【問題描述】
在項目中由於許多頁面都是連接到其他項目的頁面。由菜單連接到其他域頁面,再在其他域頁面上調用本項目的js用iframe顯示其他域的頁面,這樣就會涉及到安全性問題即跨域問題。報錯信息如下
瀏覽器控制檯跨域報錯信息:Unsafe JavaScript attempt to access frame with URL xxx from frame with URL xxx Domains, protocols and ports must match.
【分析思路】
要想解決問題就必須得還原問題本身,那就是重現問題。對於這個問題我就單獨寫了兩個項目來進行模擬測試,並使用iframe來嵌套調用兩個項目的頁面,把這兩個項目分別放在兩個不同端口的tomcat下。由於端口不同所以瀏覽器就會拋出安全異常即跨域問題。
成功的重現問題後,接下來就是根據錯誤信息在網上搜尋答案。根據網上給的答案大多數都是設置頁面document.domain爲同一域,這個方法倒是能解決,但是需要所有頁面都這樣設置,但在實際項目中往往會有很多頁面而無法每個頁面都設置,逐放棄之。後來幾經琢磨想到了利用代理頁面,就好像訪問本項目頁面一樣,再結合之前弄打印頁面採用自動創建iframe來加載別的頁面(即中間頁面/代理頁面),結果通過這種方式還真有效。
【具體解決方法】
把site1和site2項目分別放在不同端口的tomcat下運行,訪問site1的index.html頁面,這是入口頁面。在site1的index.html頁面中用iframe訪問顯示site2的index.html頁面,再通過操作site2的index.html頁面調用site1的index.html頁面中的方法excute,要調用此方法就要利用到中間代理頁面site1中的iframe.html,這個是一個關鍵頁面,因爲所有需要跨域的訪問都要通過這個頁面來調用site1項目中的代碼。這樣就形成了自己調用自己的代碼也就不會出現跨域了。在這個執行過程中site2的index.html頁面中的crossFrame方法起到了關鍵作用,就是通過它來調用代理頁面的。
項目截圖
Site1/index.html
Site2/index.html
Site1/iframe.html
訪問site1/index.html
運行截圖:
參考資料:
什麼是跨域
我們經常會在頁面上使用ajax請求訪問其他服務器的數據,此時,客戶端會出現跨域問題.
跨域問題是由於javascript語言安全限制中的同源策略造成的.
簡單來說,同源策略是指一段腳本只能讀取來自同一來源的窗口和文檔的屬性,這裏的同一來源指的是主機名、協議和端口號的組合.
例如:
URL 說明 是否允許通信 http://www.a.com/a.js
http://www.a.com/b.js同一域名下 允許 http://www.a.com/lab/a.js
http://www.a.com/script/b.js同一域名下不同文件夾 允許 http://www.a.com:8000/a.js
http://www.a.com/b.js同一域名,不同端口 不允許 http://www.a.com/a.js
https://www.a.com/b.js同一域名,不同協議 不允許 http://www.a.com/a.js
http://70.32.92.74/b.js域名和域名對應ip 不允許 http://www.a.com/a.js
http://script.a.com/b.js主域相同,子域不同 不允許 http://www.a.com/a.js
http://a.com/b.js同一域名,不同二級域名(同上) 不允許(cookie這種情況下也不允許訪問) http://www.zuidaima.com/a.js
http://www.a.com/b.js不同域名 不允許