js跨域及解決方法

2021-06-06 11:04:16 字數 2551 閱讀 3833

前段時間做重構公司**的時候需要跨域訪問我們這邊其他系統的介面,由於那邊的介面都是採用webservice的方式返回json的形式提供的,正好他們那邊還提供的ajax的使用示例,就懶得在跑到後台去傳遞了,直接前台用ajax了。結果一直沒有效果,chrome除錯的時候報出這樣的提示

xmlhttprequest cannot load  origin  is not allowed by access-control-allow-origin.
一查之後發現了是瀏覽器中js安全性的驗證的問題,於是去網上找了些解決方案,大概整理如下。 

對於主域相同而子域不同的例子,可以通過設定document.domain的辦法來解決。具體的做法是可以在和兩個檔案中分別加上document.domain = 『a.com』;然後通過a.html檔案中建立乙個iframe,去控制iframe的contentdocument,這樣兩個js檔案之間就可以「互動」了。當然這種辦法只能解決主域相同而二級網域名稱不同的情況,如果你異想天開的把script.a.com的domian設為alibaba.com那顯然是會報錯地!**如下:

www.a.com上的a.html

script.a.com上的b.html

document.domain = 'a.com';

這種方式適用於中的任何頁面相互通訊。

備註:某一頁面的domain預設等於window.location.hostname。主網域名稱是不帶www的網域名稱,例如a.com,主網域名稱前面帶字首的通常都為二級網域名稱或多級網域名稱,例如www.a.com其實是二級網域名稱。 domain只能設定為主網域名稱,不可以在b.a.com中將domain設定為c.a.com。

問題:

1、安全性,當乙個站點(b.a.com)被攻擊後,另乙個站點(c.a.com)會引起安全漏洞。

2、如果乙個頁面中引入多個iframe,要想能夠操作所有iframe,必須都得設定相同domain。

雖然瀏覽器預設禁止了跨域訪問,但並不禁止在頁面中引用其他域的js檔案,並可以自由執行引入的js檔案中的function(包括操作cookie、dom等等)。根據這一點,可以方便地通過建立script節點的方法來實現完全跨域的通訊。具體的做法可以參考yui的get utility

這裡判斷script節點載入完畢還是蠻有意思的:ie只能通過script的readystatechange屬性,其它瀏覽器是script的load事件。以下是部分判斷script載入完畢的方法。

js.onload = js.onreadystatechange = function() };

這個辦法比較繞,但是可以解決完全跨域情況下的腳步置換問題。原理是利用location.hash來進行傳值。在url: 中的『#helloworld』就是location.hash,改變hash並不會導致頁面重新整理,所以可以利用hash值來進行資料傳遞,當然資料容量是有限的。假設網域名稱a.com下的檔案cs1.html要和cnblogs.com網域名稱下的cs2.html傳遞資訊,cs1.html首先建立自動建立乙個隱藏的iframe,iframe的src指向cnblogs.com網域名稱下的cs2.html頁面,這時的hash值可以做引數傳遞用。cs2.html響應請求後再將通過修改cs1.html的hash值來傳遞資料(由於兩個頁面不在同乙個域下ie、chrome不允許修改parent.location.hash的值,所以要借助於a.com網域名稱下的乙個**iframe;firefox可以修改)。同時在cs1.html上加乙個定時器,隔一段時間來判斷location.hash的值有沒有變化,一點有變化則獲取獲取hash值。**如下:

先是a.com下的檔案cs1.html檔案:

cnblogs.com網域名稱下的cs2.html:

a.com下的網域名稱cs3.html

//因為parent.parent和自身屬於同乙個域,所以可以改變其location.hash的值parent.parent.location.hash = self.location.hash.substring(1);

當然這樣做也存在很多缺點,諸如資料直接暴露在了url中,資料容量和型別都有限等……

html5

。下一代瀏覽器都將支援這個功能:chrome 2.0+、internet explorer 8.0+, firefox 3.0+, opera 9.6+, 和 safari 4.0+ 。 facebook已經使用了這個功能,用postmessage支援基於web的實時訊息傳遞。

otherwindow.postmessage(message, targetorigin);

otherwindow: 對接收資訊頁面的window的引用。可以是頁面中iframe的contentwindow屬性;

window.open

的返回值;通過name或下標從

window.frames

取到的值。

message: 所要傳送的資料,string型別。

targetorigin: 用於限制otherwindow,「*」表示不作限制

a.com/index.html中的**:

b.com/index.html中的**:

js 幾種跨域解決方法

同源策略 js只能與同乙個域中的頁面進行通訊,必須是協議 網域名稱 埠都相同,相同域下才能相互通訊,這可以被認為是一種通訊原則,叫同源策略。跨域 js跨域是指通過js在不同的域之間進行資料傳輸或通訊,比如用ajax向乙個不同的域請求資料,或者通過js獲取頁面中不同域的框架中 iframe 的資料。只...

vue跨域解決方法

vue專案中,前端與後台進行資料請求或者提交的時候,如果後台沒有設定跨域,前端本地除錯 的時候就會報 no access control allow origin header is present on the requested resource.這種跨域錯誤。要想本地正常的除錯,解決的辦法有三...

跨域報錯解決方法

當你報這個錯誤的時候,就是沒有處理好跨域。跨域是什麼 簡單來說就是你要請求url的協議 網域名稱 埠有乙個和你的頁面url不同就是跨域 例如我這裡 我是http localhost 8080然後要訪問的資料 解決方法 中介軟體 跨域 res.writehead 設定允許那些源可以跨域請求,代表所有源...