JavaScript跨域問題方法彙總

【【5種處理js跨域問題方法彙總】】

當協議名、主機名、端口名,有一個不相同的時候,就需要跨域。例子https://www.baidu.com:80/index.html,這三個不同就不發使用。

src可以訪問外部的連接進行數據處理。


【1.jsonp。ajax請求,dataType爲jsonp。這種形式需要請求在服務端調整爲返回callback([json-object])的形式。

【2.iframe跨域。頁面中增加一個iframe元素,在需要調用get請求的時候,將iframe的src設置爲get請求的url即可發起get請求的調用。

代碼如下:var url = "http://xxx.xxx.xxx?p1=1&p2=2";

         $("#iframe").attr("src", url);//跨域,使用iframe

iframe方式強於jsonp,除了可以處理http請求,還能夠跨域實現js調用。

基於iframe實現的跨域要求兩個域具有aa.xx.com,bb.xx.com這種特點,也就是兩個頁面必須屬於一個基礎域(例如都是xxx.com,或是xxx.com.cn),使用同一協議(例如都是 http)和同一端口(例如都是80),這樣在兩個頁面中同時添加document.domain,就可以實現父頁面調用子頁面的函數,

【3.script元素的src屬性處理。

1/iframe、img、style、script等元素的src屬性可以直接向不同域請求資源,jsonp正是利用script標籤跨域請求資源的簡單實現,所以這個和jsonp本質一樣,同樣需要服務端請求返回callback...形式。

2/基於script標籤實現跨域 

script標籤本身就可以訪問其它域的資源,不受瀏覽器同源策略的限制,可以通過在頁面動態創建script標籤,代碼如下: 

var script = document.createElement('script');  

script.src = "http://aa.xx.com/js/*.js";  

document.body.appendChild(script);  

    這樣通過動態創建script標籤就可以加載其它域的js文件,然後通過本頁面就可以調用加載後js文件的函數,這樣做的缺陷就是不能加載其它域的文檔,只能是js文件,jsonp便是通過這種方式實現的,jsonp通過向其它域傳入一個callback參數,通過其他域的後臺將callback參數值和json串包裝成javascript函數返回,因爲是通過script標籤發出的請求,瀏覽器會將返回來的字符串按照javascript進行解析執行,實現了域與域之間的數據傳輸。 

jquery中對jsonp的支持也是基於此方案。 

【4.在服務器使用get處理。

 對於業務上沒有硬性要求在前端處理的,可以在服務端做一次封裝,再服務端發起調用,這樣就可以解決跨域的問題。然後再根據請求是發出就完,還是需要獲取返回值,來決定代碼使用同步或者異步模式。

【5.flash跨域

過於尖端了==,再研究


1、谷歌瀏覽器後面加後綴,就成爲跨域瀏覽器。json不能跨域。

2、解決跨域方法:先與後臺協商好,用jsonp



【谷歌瀏覽器跨域問題解決:】

桌面谷歌瀏覽器快捷方式---複製副本---屬性---目標尾部添加 --disable-web-security --user-data-dir

wKiom1iLbCfAtS8VAABJ9ruAd_g848.jpg-wh_50

例如C:\Users\Administrator\AppData\Local\Google\Chrome\Application\chrome.exe --disable-web-security --user-data-dir


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章