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