iframe跨域、ajax跨域和JS跨域通訊的幾種解決方案
阿新 • • 發佈：2019-02-19
需要ajax跨域取得資料,如果是在本域中確實沒有問題，但是放到二級域和其他域下瀏覽器直接就彈出提示框:“該頁正在訪問其控制範圍之外的資料，這有些危險，是否繼續"
1.什麼引起了ajax跨域不能的問題
ajax本身實際上是通過XMLHttpRequest物件來進行資料的互動，而瀏覽器出於安全考慮，不允許js程式碼進行跨域操作，所以會警告。
2.有什麼完美的解決方案麼？
沒有。解決方案有不少，但是隻能是根據自己的實際情況來選擇。
具體情況有:
一、本域和子域的相互訪問: 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屬性是可以跨域 的。具體看程式碼，這個也比較簡單。
code:
http://www.live-share.com/files/300697/Cross_The_Site_Test_code.rar.html
(csdn不能貼上附件麼？)
總結：
第一種情況：域和子域的問題，可以完全解決互動。
第二種情況：跨域，實現過程非常麻煩，需要兩個域開發者都能控制，適用於簡單互動。
第三種情況：跨域，開發者只控制一個域即可，實現過程需要增加代理取得資料，是常用的方式。
第四種情況：跨域，兩個域開發者都需要控制，返回一段js程式碼。
PS:程式碼自己按照情況修改即可。
這是拿別人的參考連結，老美的文章比較多。
1. Security Considerations: Dynamic HTML
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/sec_dhtml.asp
2. About Cross-Frame Scripting and Security
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/xframe_scripting_security.asp
3. Cross-Domain Proxy
http://ajaxpatterns.org/Cross-Domain_Proxy
4. Cross Domain XMLHttpRequest using an IFrame Proxy
http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book75
5. Back Button Support for Atlas UpdatePanels
http://www.nikhilk.net/BackButtonSupport.aspx
6. Cross-document messaging hack
http://blog.monstuff.com/archives/000304.html
7. Building Mash-ups with "Atlas"
http://atlas.asp.net/docs/Walkthroughs/DevScenarios/bridge.aspx
8. Calling web services hosted outside of your application with “Atlas”
http://blogs.msdn.com/federaldev/archive/2006/07/31/684229.aspx
http://www.federaldeveloper.com/Shared%20Documents/Presentations%20by%20Marc%
20Schweigert/CallAtlasWebServiceInDifferentProject.zip
9. AJAX Tip: Passing Messages Between iframes
http://www.25hoursaday.com/weblog/PermaLink.aspx?guid=3b03cf9d-b589-4838-806e-64efcc0a1a15
10. OSCON Cross-site Ajax Slides
http://blog.plaxo.com/archives/2006/07/oscon_crosssite.html
http://www.plaxo.com/css/api/Joseph-Smarr-Plaxo-OSCON-2006.ppt
11. OSCON 2006: Cross-site Ajax
http://www.sitepoint.com/blogs/2006/07/28/oscon-2006-cross-site-ajax/
1.什麼引起了ajax跨域不能的問題
ajax本身實際上是通過XMLHttpRequest物件來進行資料的互動，而瀏覽器出於安全考慮，不允許js程式碼進行跨域操作，所以會警告。
2.有什麼完美的解決方案麼？
沒有。解決方案有不少，但是隻能是根據自己的實際情況來選擇。
具體情況有:
一、本域和子域的相互訪問: 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屬性是可以跨域 的。具體看程式碼，這個也比較簡單。
code:
http://www.live-share.com/files/300697/Cross_The_Site_Test_code.rar.html
(csdn不能貼上附件麼？)
總結：
第一種情況：域和子域的問題，可以完全解決互動。
第二種情況：跨域，實現過程非常麻煩，需要兩個域開發者都能控制，適用於簡單互動。
第三種情況：跨域，開發者只控制一個域即可，實現過程需要增加代理取得資料，是常用的方式。
第四種情況：跨域，兩個域開發者都需要控制，返回一段js程式碼。
PS:程式碼自己按照情況修改即可。
這是拿別人的參考連結，老美的文章比較多。
1. Security Considerations: Dynamic HTML
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/sec_dhtml.asp
2. About Cross-Frame Scripting and Security
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/xframe_scripting_security.asp
3. Cross-Domain Proxy
http://ajaxpatterns.org/Cross-Domain_Proxy
4. Cross Domain XMLHttpRequest using an IFrame Proxy
http://manual.dojotoolkit.org/WikiHome/DojoDotBook/Book75
5. Back Button Support for Atlas UpdatePanels
http://www.nikhilk.net/BackButtonSupport.aspx
6. Cross-document messaging hack
http://blog.monstuff.com/archives/000304.html
7. Building Mash-ups with "Atlas"
http://atlas.asp.net/docs/Walkthroughs/DevScenarios/bridge.aspx
8. Calling web services hosted outside of your application with “Atlas”
http://blogs.msdn.com/federaldev/archive/2006/07/31/684229.aspx
http://www.federaldeveloper.com/Shared%20Documents/Presentations%20by%20Marc%
20Schweigert/CallAtlasWebServiceInDifferentProject.zip
9. AJAX Tip: Passing Messages Between iframes
http://www.25hoursaday.com/weblog/PermaLink.aspx?guid=3b03cf9d-b589-4838-806e-64efcc0a1a15
10. OSCON Cross-site Ajax Slides
http://blog.plaxo.com/archives/2006/07/oscon_crosssite.html
http://www.plaxo.com/css/api/Joseph-Smarr-Plaxo-OSCON-2006.ppt
11. OSCON 2006: Cross-site Ajax
http://www.sitepoint.com/blogs/2006/07/28/oscon-2006-cross-site-ajax/