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)行同域處理后方可訪問！
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è)問號(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)行同域處理后方可訪問！
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è)問號(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)文章
JavaScript中三種觀察者實(shí)現(xiàn)案例分享
前面突然看到 Object.defineProperty,就順道想到 Proxy,然后就想到了觀察者案例,這邊還沒有用 javascript編寫一個(gè)觀察者的案例呢,順道加入了一個(gè) event-bus 監(jiān)聽事件案例,湊一起看一看不同的實(shí)現(xiàn)方式,需要的朋友可以參考下2023-08-08
CSS或者JS實(shí)現(xiàn)鼠標(biāo)懸停顯示另一元素
這篇文章主要介紹了CSS或者JS實(shí)現(xiàn)鼠標(biāo)懸停顯示另一元素的相關(guān)資料,需要的朋友可以參考下2016-01-01
js中,new Date([params]),參數(shù)傳遞有五種方式,本文給大家講解的非常詳細(xì),對(duì)new Date()參數(shù)相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2023-11-11
單例模式也稱作為單子模式，更多的也叫做單體模式。為軟件設(shè)計(jì)中較為簡(jiǎn)單但是最為常用的一種設(shè)計(jì)模式。這篇文章主要介紹了Javascript實(shí)現(xiàn)單例模式的相關(guān)資料,需要的朋友可以參考下2016-01-01
JS字符串與二進(jìn)制的相互轉(zhuǎn)化實(shí)例代碼詳解
這篇文章主要介紹了JS字符串與二進(jìn)制的相互轉(zhuǎn)化 ,在文中給大家提到了Js之字符串和字節(jié)碼之間的相互轉(zhuǎn)換，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
本文通過(guò)示例向大家簡(jiǎn)單分析了javascript的事件和方法，文章簡(jiǎn)潔而不簡(jiǎn)單，是篇非常不錯(cuò)的基礎(chǔ)文章，這里推薦給大家。2015-02-02
JavaScript find()方法及返回?cái)?shù)據(jù)實(shí)例
這篇文章主要介紹了JavaScript中的find()方法和返回?cái)?shù)據(jù)的內(nèi)存指向,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
javascript前端埋點(diǎn)上報(bào)的幾種方式
本文將介紹前端埋點(diǎn)上報(bào)的幾種常見方式,并詳細(xì)闡述如何在項(xiàng)目中運(yùn)用這些方式進(jìn)行數(shù)據(jù)上報(bào),以幫助開發(fā)者更好地進(jìn)行數(shù)據(jù)收集和分析,感興趣的可以了解一下2023-11-11
這篇文章主要介紹了簡(jiǎn)單的JavaScript互斥鎖的相關(guān)資料,需要的朋友可以參考下2014-02-02
Node.js開發(fā)指南中的簡(jiǎn)單實(shí)例(mysql版)
工作原因需要用到nodejs，于是找到了《node.js開發(fā)指南》這本書來(lái)看看，作者BYVoid 為清華大學(xué)計(jì)算機(jī)系的高材生，年紀(jì)竟比我還小一兩歲，中華地廣物博真是人才輩出,佩服2013-09-09