跨域&JSONP
阿新 • • 發佈:2018-08-26
參數 tps css 發送 端口 訪問 效果 cor end
-
協議頭、域名、端口完全一致就叫同源
-
跨域:協議頭、域名、端口有一個不一樣就叫跨域
-
判斷是否同源,如:http://www.example.com/detail.html 與以下地址對比
是否同源 | 原因 | |
---|---|---|
http://api.example.com/detail.html | 不同源 | 域名不同 |
https://www.example.com/detail.html | 不同源 | 協議不同 |
http://www.example.com:8080/detail.html | 不同源 | 端口不同 |
http://api.example.com:8080/detail.html |
不同源 | 域名、端口不同 |
https://api.example.com/detail.html | 不同源 | 協議、域名不同 |
https://www.example.com:8080/detail.html | 不同源 | 端口、協議不同 |
http://www.example.com/other.html | 同源 | 只是目錄不同 |
- 註:根據同源和跨域的意思,跨域就是指不同源
- 如果要在
localhost/test.html
這個網站上訪問http://api.douban.com/v2/movie/top250
<img href="http://api.douban.com/v2/movie/top250" alt="">
此時可以看到能正確收到響應,但拿不到響應體(返回的JSON數據),如圖:
<link rel="stylesheet"src="http://api.douban.com/v2/movie/top250"
1 <script> 2 function test(json) { 3 console.log(‘我被調用了‘); 4 console.log(json); 5 } 6 </script> 7 <script src="http://api.douban.com/v2/movie/top250?callback=test"></script>
結果如下圖
說明:我們可以看到,我們預先定義了一個函數叫test,再然後在src裏加了一個參數callback=test,可以發現,當請求完成,會自動調用test這個函數,並且把響應體(JSON數據)當做參數傳遞過來
-
-
新建
1.txt
文件,文件內容如下:
alert(‘你好‘);
<script src="1.txt"></script>
結果:
結論:script導入文件會默認把文件內容當JS代碼執行,跟文件格式無關
1 <script> 2 //聲明一個success函數 3 function success(obj){ 4 console.log(obj); 5 } 6 </script> 7 <!-- script導入文件 --> 8 <script src="http://www.demo.com/top250.php"></script>
echo "success(‘hello‘)";
結果
說明:請求的top250文件裏,服務器最終返回的是 success(‘hello‘); 這個當JS代碼執行時,是調用函數並傳遞參數hello的語法,因此可以看到success函數被調用,並且打印了參數hello
圖解:
1 $data = array(‘name‘ => ‘jack‘,‘age‘=>16,‘gender‘=>‘true‘ ); 2 3 $json = json_encode($data); 4 5 echo "success({$json})";
- 再次訪問網頁可以發現,打印的參數就變成了json對象
1 <script> 2 //聲明函數 3 function myFunc(obj){ 4 console.log(obj); 5 } 6 </script> 7 8 <!-- 請求數據,並加入callback參數,值為myFunc --> 9 <script src="http://www.demo.com/top250.php?callback=myFunc"></script>
1 <?php 2 3 //拿到傳遞過來的參數,即函數名 4 $funcName = $_GET[‘callback‘]; 5 6 //準備數據 7 $data = array(‘name‘ => ‘jack‘,‘age‘=>16,‘gender‘=>true ); 8 9 //轉化為JSON 10 $json = json_encode($data); 11 12 //傳過來的是什麽函數名,就調用什麽函數 13 echo "$funcName($json)"; 14 ?>
這就是之前跨域拿數據的原理,即服務器端調用瀏覽器端的函數,把參數傳遞過來即可
-
-
JSON with Padding 是一種借助於script標簽發送跨域請求的技巧方案。
-
-
它不是一套新技術,只是聰明的程序員想出的一套方案
-
能不能用這套方案,要看服務器端代碼怎麽寫,服務器端如果寫了調用函數的代碼,那麽就能支持JSONP方案
-
以後服務器的接口會有接口文檔進行說明是否支持JSONP
-
建議:不要隨意使用別人的接口,特別是別人寫的支持JSONP的接口
例:https://developers.douban.com/wiki/?title=api_v2
-
-
直接從服務器端解決ajax無法跨域訪問的問題(可以不要用jsonp了)
// 允許遠端訪問 header(‘Access-Control-Allow-Origin: *‘);
跨域&JSONP