淺析jsopn跨域請(qǐng)求原理及cors（跨域資源共享）的完美解決方法
由于同源策略的緣故，ajax不能向不同域的網(wǎng)站發(fā)出請(qǐng)求。
比如a站localhost需要向b站請(qǐng)求數(shù)據(jù)，地址為：http://www.walk-sing.com/api.php
請(qǐng)求的代碼如下：
<html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$.get("http://www.walk-sing.com/api.php", function(data){
alert("Data Loaded: " + data);
});
</script>
<body>
</body>
</html>
訪問(wèn)該頁(yè)面，頁(yè)面空白，按F12打開(kāi)控制臺(tái)，可以看到截圖所示信息：
解決方案1：jsonp
我們先來(lái)看這樣一個(gè)例子：
<html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function alertSomething(data){
alert(data.name+data.age);
}
alertSomething(
{"name":"ben","age":24}
);
// $.get("http://www.walk-sing.com/api.php", function(data){
// alert("Data Loaded: " + data);
// });
</script>
<body>
</body>
</html>
執(zhí)行結(jié)果：
我們也可以這樣寫：
<html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function alertSomething(data){
alert(data.name+data.age);
};
// $.get("http://www.walk-sing.com/api.php", function(data){
// alert("Data Loaded: " + data);
// });
</script>
<script type="text/javascript" src="alertsomething.js"></script>
<body>
</body>
</html>
alertsomething.js的內(nèi)容如下：
alertSomething(
{"name":"ben","age":24}
);
也可以得到截圖所示結(jié)果。
我們?cè)贀Q一個(gè)方式，將alertsomething.js上傳到服務(wù)器，將代碼改為如下形式：
<html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function alertSomething(data){
alert(data.name+data.age);
};
// $.get("http://www.walk-sing.com/api.php", function(data){
// alert("Data Loaded: " + data);
// });
</script>
<script type="text/javascript" src="http://www.walk-sing.com/alertsomething.js"></script>
<body>
</body>
</html>
也可以得到截圖所示結(jié)果。
不知道大家發(fā)現(xiàn)沒(méi)有，script標(biāo)簽沒(méi)有同源策略的限制，jsonp正是基于此原理實(shí)現(xiàn)的。
jsonp的具體實(shí)現(xiàn)可參見(jiàn)如下代碼：
jsonp.php
<?php
$method = isset($_GET['callback']) ? $_GET['callback'] : '';
if(!isset($method)){
exit('bad request');
}
$testArr = array(
'name' => 'ben',
'age' => 23
);
echo $method.'('.json_encode($testArr).')';
js代碼：
<html>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function alertSomething(data){
alert(data.name+data.age);
};
// $.get("http://www.walk-sing.com/api.php", function(data){
// alert("Data Loaded: " + data);
// });
</script>
<script type="text/javascript" src="http://www.walk-sing.com/jsonp.php?callback=alertSomething"></script>
<body>
</body>
</html>
也可以得到截圖所示結(jié)果。
解決方案二：CORS（跨域資源共享，Cross-Origin Resource Sharing）
不知道大家發(fā)現(xiàn)了沒(méi)有，jsonp只能發(fā)送get請(qǐng)求，而如果業(yè)務(wù)中需要用到post請(qǐng)求時(shí)，jsonp就無(wú)能為力了。
這時(shí)候cors（跨域資源共享，Cross-Origin Resource Sharing）就派上用處了。
CORS的原理：
CORS定義一種跨域訪問(wèn)的機(jī)制，可以讓AJAX實(shí)現(xiàn)跨域訪問(wèn)。CORS 允許一個(gè)域上的網(wǎng)絡(luò)應(yīng)用向另一個(gè)域提交跨域 AJAX 請(qǐng)求。實(shí)現(xiàn)此功能非常簡(jiǎn)單，只需由服務(wù)器發(fā)送一個(gè)響應(yīng)標(biāo)頭即可。
就拿前面第一個(gè)例子來(lái)說(shuō)，我只要在api.php文件頭加上如下一句話即可：
header('access-control-allow-origin:*');
再次請(qǐng)求該接口，結(jié)果如下截圖所示：
以上所述是小編給大家介紹的jsopn跨域請(qǐng)求原理及cors（跨域資源共享）的完美解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
在學(xué)習(xí)JavaScript中的繼承機(jī)制時(shí),我們常常會(huì)遇到原型和原型鏈這兩個(gè)概念,在初學(xué)階段,不理解這些概念很容易陷入迷茫,甚至?xí)?dǎo)致學(xué)習(xí) JS 的路程變得曲折,本文將介紹JavaScript原型和原型鏈的概念、設(shè)計(jì)思想以及相關(guān)的使用方法,需要的朋友可以參考下2023-07-07
arctext.js實(shí)現(xiàn)文字平滑彎曲弧形效果的插件
這篇文章主要介紹了arctext.js實(shí)現(xiàn)文字平滑彎曲弧形效果的插件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
解決Layui數(shù)據(jù)表格顯示無(wú)數(shù)據(jù)提示的問(wèn)題
今天小編就為大家分享一篇解決Layui數(shù)據(jù)表格顯示無(wú)數(shù)據(jù)提示的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
JS實(shí)現(xiàn)網(wǎng)頁(yè)Div層Clone拖拽效果
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)Div層Clone拖拽效果,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁(yè)面元素位置屬性及層級(jí)屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
深入理解事件冒泡(Bubble)和事件捕捉(capture)
下面小編就為大家?guī)?lái)一篇深入理解事件冒泡(Bubble)和事件捕捉(capture)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
JavaScript?error瀏覽器端錯(cuò)誤捕獲處理方法筆記解決示例
這篇文章主要為大家介紹了JavaScript?error瀏覽器端錯(cuò)誤捕獲處理方法筆記解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
js計(jì)算精度問(wèn)題小結(jié)，需要的朋友可以參考一下2013-04-04
JavaScript設(shè)計(jì)模式--簡(jiǎn)單工廠模式定義與應(yīng)用案例詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式--簡(jiǎn)單工廠模式定義與應(yīng)用,結(jié)合具體案例形式詳細(xì)分析了JavaScript設(shè)計(jì)模式中簡(jiǎn)單工廠模式基本概念、定義、用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05
JS實(shí)現(xiàn)按鈕控制計(jì)時(shí)開(kāi)始和停止功能
這篇文章給大家介紹了JS實(shí)現(xiàn)按鈕控制計(jì)時(shí)開(kāi)始和停止功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-07-07
JavaScript 經(jīng)典效果集...2007-01-01