淺析jsopn跨域請求原理及cors（跨域資源共享）的完美解決方法
由于同源策略的緣故，ajax不能向不同域的網(wǎng)站發(fā)出請求。
比如a站localhost需要向b站請求數(shù)據(jù)，地址為：http://www.walk-sing.com/api.php
請求的代碼如下：
<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>
訪問該頁面，頁面空白，按F12打開控制臺，可以看到截圖所示信息：
解決方案1：jsonp
我們先來看這樣一個例子：
<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é)果。
我們再換一個方式，將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)沒有，script標(biāo)簽沒有同源策略的限制，jsonp正是基于此原理實(shí)現(xiàn)的。
jsonp的具體實(shí)現(xià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)了沒有，jsonp只能發(fā)送get請求，而如果業(yè)務(wù)中需要用到post請求時，jsonp就無能為力了。
這時候cors（跨域資源共享，Cross-Origin Resource Sharing）就派上用處了。
CORS的原理：
CORS定義一種跨域訪問的機(jī)制，可以讓AJAX實(shí)現(xiàn)跨域訪問。CORS 允許一個域上的網(wǎng)絡(luò)應(yīng)用向另一個域提交跨域 AJAX 請求。實(shí)現(xiàn)此功能非常簡單，只需由服務(wù)器發(fā)送一個響應(yīng)標(biāo)頭即可。
就拿前面第一個例子來說，我只要在api.php文件頭加上如下一句話即可：
header('access-control-allow-origin:*');
再次請求該接口，結(jié)果如下截圖所示：
以上所述是小編給大家介紹的jsopn跨域請求原理及cors（跨域資源共享）的完美解決方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了如何使用HTML、CSS和JavaScript創(chuàng)建一個簡單的電影院座位圖,并實(shí)現(xiàn)選票功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-02-02
javaScript實(shí)現(xiàn)支付10秒倒計時
這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)支付10秒倒計時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
js中scrollTop()方法和scroll()方法用法示例
這篇文章主要介紹了js中scrollTop()方法和scroll()方法用法,結(jié)合實(shí)例形式分析了scrollTop()方法和scroll()方法滾動操作的用法與相關(guān)操作技巧,需要的朋友可以參考下2016-10-10
這篇文章介紹了js動態(tài)給table添加/刪除tr的方法，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了詳解如何使用webpack打包JS，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
Vue項(xiàng)目vscode 安裝eslint插件的方法(代碼自動修復(fù))
這篇文章主要介紹了Vue項(xiàng)目vscode 安裝eslint插件的方法 代碼自動修復(fù),需要的朋友可以參考下2020-04-04
這篇文章主要介紹了微信小程序搜索功能(附：小程序前端+PHP后端)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉菜單樣式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
這篇文章主要介紹了js實(shí)現(xiàn)3D照片墻效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了JS聲明對象時屬性名加引號與不加引號的問題及解決方法,需要的朋友可以參考下2018-02-02