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