-
- 什么是 跨域
- 不同域名之間進行訪問。
- 跨域，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對javascript施加的安全限制
-
- 同源策略？
- 所謂同源是指域名，協(xié)議，端口均相同。
- 例子如下
http://www.123.com/index.html 調(diào)用 http://www.123.com/server.php （非跨域） http://www.123.com/index.html 調(diào)用 http://www.456.com/server.php （主域名不同:123/456，跨域） http://abc.123.com/index.html 調(diào)用 http://def.123.com/server.php （子域名不同:abc/def，跨域） http://www.123.com:8080/index.html 調(diào)用http://www.123.com:8081/server.php （端口不同:8080/8081，跨域） http://www.123.com/index.html 調(diào)用 https://www.123.com/server.php （協(xié)議不同:http/https，跨域）- 請注意：localhost和127.0.0.1雖然都指向本機，但也屬于跨域。
- 瀏覽器執(zhí)行javascript腳本時，會檢查這個腳本屬于哪個頁面，如果不是同源頁面，就不會被執(zhí)行。
-
是誰造成了跨域？
瀏覽器造成的跨域
-
是誰造成了跨域？
-
為什么會有跨域？
為了數(shù)據(jù)的安全
-
為什么會有跨域？
-
- 在開發(fā)中，你是如何解決跨域的問題？
- jsonp解決跨域
- 往瀏覽器當(dāng)中安裝插件
-
- jsonp與Ajax有關(guān)系嗎
- 沒有。
- Ajax是JavaScript提供的方法。用于請求數(shù)據(jù)，當(dāng)跨域的時候，拿不到數(shù)據(jù)。
- jsonp是解決跨域的方案
-
- jsonp原理是怎么實現(xiàn)的
- 借助標簽的src屬性進行數(shù)據(jù)請求
- 使用src,請求數(shù)據(jù)
- 在本地聲明一個方法
- 要在服務(wù)端處理跨域
- jsonp的原理1（原生的方式）
在本地聲明一個方法
<script>
function fn() {
alert("執(zhí)行了前端的alert方法")
}
</script>
使用src,請求數(shù)據(jù)
<script src="06-jsonp.php"></script>
要在服務(wù)端處理跨域
echo "fn()";
該方法能夠解決跨域的問題，但是方法被寫死不靈活。下面的方法將函數(shù)名傳遞過去。
- 9. jsonp的原理1（原生的改進）
在本地聲明一個方法
<script>
function wmx() {
alert("wmx函數(shù)執(zhí)行了前端的alert方法")
}
</script>
使用src,請求數(shù)據(jù)
//將函數(shù)名作為參數(shù)傳遞過去
<script src="07-jsonp.php?callback=wmx"></script>
要在服務(wù)端處理跨域
$res = $_GET['callback'];
//使用點進行連接
echo $res."()";
- 10.jsonp的原理1（原生：實現(xiàn)服務(wù)端返回數(shù)據(jù)給前端）
在本地聲明一個方法
<script>
function wmx(args) {
alert(args)
}
</script>
使用src,請求數(shù)據(jù)
//將函數(shù)名作為參數(shù)傳遞過去
<script src="07-jsonp.php?callback=wmx"></script>
要在服務(wù)端處理跨域
$res = $_GET['callback'];
//使用點進行連接
echo $res."('這是服務(wù)端返回的數(shù)據(jù)')";
-
演示跨域的實現(xiàn)1（使用jsonp的方法解決跨域）
借用豆瓣API模擬
https://api.douban.com/v2/book/1220562具體實現(xiàn)
在本地聲明一個方法
<script>
function wmx(args) {
alert(args);
console.log(args);
}
</script>
使用src,請求數(shù)據(jù)
//豆瓣API可接受callback參數(shù)，使返回的數(shù)據(jù)為jsonp。
//callback只能包含數(shù)字、字母、下劃線，長度不大于50
<script src="https://api.douban.com/v2/book/1220562?callback=wmx"></script>
-
演示跨域的實現(xiàn)2（AngularJS中處理跨域：封裝原生jsonp）
在不同的域內(nèi)新建一個文件，地址為
http://localhost/mine/09.php具體實現(xiàn)
使用angularJS實現(xiàn)跨域（原理：jsonp）
核心代碼：（必須按照嚴格來寫，不能寫錯）
method:'jsonp',
params:{
callback:"JSON_CALLBACK"
}
<body ng-app="app" ng-controller="wmxController">
<p>{{data}}</p>
<script src="angular.js"></script>
<script>
var app = angular.module('app',[]);
app.controller('wmxController',['$scope','$http',function ($scope,$http) {
$http({m
url:'http://localhost/mine/09.php',
method:'jsonp',
params:{
callback:"JSON_CALLBACK"
}
}).success(function (res) {
$scope.data = res;
console.log($scope.data);
}).error(function (e) {
})
}])
</script>
后臺的數(shù)據(jù)
$res = $_GET['callback'];
echo $res."('我是跨域獲取后的數(shù)據(jù)啦啦啦')";
內(nèi)部實現(xiàn)的原理：
- 幫你創(chuàng)建了一個script標簽 src=url
- 創(chuàng)建聲明了一個
function angular.callbacks._0(args){args}
- 服務(wù)器接收
