由于同源策略的緣故，ajax不能向不同域的網(wǎng)站發(fā)出請(qǐng)求。
比如a站localhost需要向b站請(qǐng)求數(shù)據(jù)，地址為：http://www.walk-sing.com/api.php
請(qǐng)求的代碼如下：
|
1
2
3
4
5
6
7
8
9
10
|
<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打開控制臺(tái)，可以看到截圖所示信息：
解決方案1：jsonp
我們先來看這樣一個(gè)例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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é)果：
我們也可以這樣寫：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<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)容如下：
|
1
2
3
|
alertSomething( {"name":"ben","age":24} ); |
也可以得到截圖所示結(jié)果。
我們?cè)贀Q一個(gè)方式，將alertsomething.js上傳到服務(wù)器，將代碼改為如下形式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<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
|
1
2
3
4
5
6
7
8
9
10
|
<?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代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<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請(qǐng)求，而如果業(yè)務(wù)中需要用到post請(qǐng)求時(shí)，jsonp就無能為力了。
這時(shí)候cors（跨域資源共享，Cross-Origin Resource Sharing）就派上用處了。
CORS的原理：
CORS定義一種跨域訪問的機(jī)制，可以讓AJAX實(shí)現(xià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è)例子來說，我只要在api.php文件頭加上如下一句話即可：
|
1
|
header('access-control-allow-origin:*'); |
再次請(qǐng)求該接口，結(jié)果如下截圖所示：
以上所述是小編給大家介紹的jsopn跨域請(qǐng)求原理及cors（跨域資源共享）的完美解決方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)服務(wù)器之家網(wǎng)站的支持！
原文鏈接：http://blog.csdn.net/u011250882/article/details/46946889
