Javascript跨域請求的4種解決方式
更新時間：2013年03月17日 09:55:37 作者：
如果所請求的域名跟這個域名不致，這種情況就是跨域，由于跨域存在漏洞，所以一般來說正常的跨域請求方式是請求不到的，所以有了本文的出現(xiàn)，感興趣的你可以參考下哈，希望可以幫助到你
什么情況下才會出現(xiàn)跨域？
假設(shè)域名是：http://www.example.com.cn/
如果所請求的域名跟這個域名不致，這種情況就是跨域，由于跨域存在漏洞，所以一般來說正常的跨域請求方式是請求不到的。
解決方式：
一、window.name
1、 服務(wù)器返回
<script>window.name='{"id":"3", "name":"leisure"}';</script>
2、定義一個iframe，添加onload事件 <iframe id="iframe1" onload="iLoad"><iframe>
<script type="text/javascript">
var load = false;
function iLoad() {
if(load == false) {
// 同域處理，請求后會再次重新加載iframe
document.getElementById('iframe1').contentWindow.location = '/';
load = true;
} else {
// 獲取window.name的內(nèi)容，注意必須進行同域處理后方可訪問！
var data = document.getElementById('iframe1').contentWindow.name;
alert(data); // {"id":"3", "name":"leisure"}
load = false;
}
}
</script>
3、定義一個form，設(shè)置form的target為iframe的id，然后提交form
<form action="url" method="POST" target="iframe1">
<button type="submit" value="submit" />
</form>
二、JSONP
服務(wù)器返回 callback({"id": "3", "name": "leisure"});
<script type="text/javascript">
function callback(data) {
alert(data);
}
</script>
<script type="text/javascript" src="http://www.example.com.cn/product.jsp?id=5&jsonp=callback"></script>
三、jQuery.getJSON
服務(wù)器返回 json格式數(shù)據(jù) test({"id": "3", "name": "leisure"}); test函數(shù)名為callback參數(shù)中定義
$.getJSON(url + "?callback=?", data, function(data) {
}
注意callback=?這個參數(shù)必須帶上，jquery會自動生成一個函數(shù)名替換這個問號！jQuery.getJSON實際上是用了JSONP方式實現(xiàn)。
四、flash跨域
服務(wù)器添加crossdomain.xml
http://www.example.com.cn/crossdomain.xml
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*.another.com.cn" />
</cross-domain-policy>
假設(shè)域名是：http://www.example.com.cn/
如果所請求的域名跟這個域名不致，這種情況就是跨域，由于跨域存在漏洞，所以一般來說正常的跨域請求方式是請求不到的。
解決方式：
一、window.name
1、 服務(wù)器返回
復(fù)制代碼 代碼如下:
<script>window.name='{"id":"3", "name":"leisure"}';</script>
2、定義一個iframe，添加onload事件 <iframe id="iframe1" onload="iLoad"><iframe>
<script type="text/javascript">
var load = false;
function iLoad() {
if(load == false) {
// 同域處理，請求后會再次重新加載iframe
document.getElementById('iframe1').contentWindow.location = '/';
load = true;
} else {
// 獲取window.name的內(nèi)容，注意必須進行同域處理后方可訪問！
var data = document.getElementById('iframe1').contentWindow.name;
alert(data); // {"id":"3", "name":"leisure"}
load = false;
}
}
</script>
3、定義一個form，設(shè)置form的target為iframe的id，然后提交form
復(fù)制代碼 代碼如下:
<form action="url" method="POST" target="iframe1">
<button type="submit" value="submit" />
</form>
二、JSONP
服務(wù)器返回 callback({"id": "3", "name": "leisure"});
復(fù)制代碼 代碼如下:
<script type="text/javascript">
function callback(data) {
alert(data);
}
</script>
<script type="text/javascript" src="http://www.example.com.cn/product.jsp?id=5&jsonp=callback"></script>
三、jQuery.getJSON
服務(wù)器返回 json格式數(shù)據(jù) test({"id": "3", "name": "leisure"}); test函數(shù)名為callback參數(shù)中定義
復(fù)制代碼 代碼如下:
$.getJSON(url + "?callback=?", data, function(data) {
}
注意callback=?這個參數(shù)必須帶上，jquery會自動生成一個函數(shù)名替換這個問號！jQuery.getJSON實際上是用了JSONP方式實現(xiàn)。
四、flash跨域
服務(wù)器添加crossdomain.xml
http://www.example.com.cn/crossdomain.xml
復(fù)制代碼 代碼如下:
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*.another.com.cn" />
</cross-domain-policy>
相關(guān)文章
為什么說JavaScript預(yù)解釋是一種毫無節(jié)操的機制詳析
這篇文章主要給大家介紹了關(guān)于為什么說JavaScript預(yù)解釋是一種毫無節(jié)操的機制的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧2018-11-11
這篇文章主要為大家詳細介紹了js圖片輪播效果實現(xiàn)原理，幫助大家更好地實現(xiàn)圖片輪播效果，真正理解圖片輪播原理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
vscode?對?typescript代碼調(diào)試的步驟
在VS?Code中，要對?TypeScript代碼進行調(diào)試，需要先編譯?TypeScript?代碼為JavaScript代碼，這篇文章主要介紹了vscode對typescript代碼調(diào)試的方法,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細介紹了OpenLayers實現(xiàn)圖層切換控件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
js中頁面的重新加載(當(dāng)前頁面/上級頁面)及frame或iframe元素引用介紹
用JavaScript刷新上級頁面和當(dāng)前頁面在某些情況下還是比較實用的，感興趣的朋友可以了解下另外介紹一下frame或iframe元素的引用方法，希望本文對你有所幫助2013-01-01
閉包：是指有權(quán)訪問另外一個函數(shù)作用域中的變量的函數(shù)。創(chuàng)建閉包的常見方式就是在一個函數(shù)內(nèi)部創(chuàng)建另外一個函數(shù)。在javascript中沒有塊級作用域，一般為了給某個函數(shù)申明一些只有該函數(shù)才能使用的局部變量時，我們就會用到閉包，我們來詳細探討下2015-07-07
這篇文章主要介紹了基于JS實現(xiàn)類似支付寶支付密碼輸入框功能，密碼框只準輸入數(shù)字且只可以輸入6位數(shù)字，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2016-09-09
原生JS實現(xiàn)網(wǎng)絡(luò)彩票投注效果
分享一個最近模仿市面彩票系統(tǒng)寫個小案例，沒有使用任何后臺，從投注到開獎再到返獎都是用原生JS實現(xiàn)的。2016-09-09
一段多瀏覽器的"復(fù)制到剪貼板"javascript代碼
一段多瀏覽器的"復(fù)制到剪貼板"javascript代碼...2007-03-03
TypeError: Cannot set properties of
這篇文章主要介紹了TypeError: Cannot set properties of undefined (setting ‘xx‘)的問題,本文給大家分享完美解決方案,需要的朋友可以參考下2023-09-09