-
- 什么是 跨域
- 不同域名之間進(jìn)行訪問咕宿。
- 跨域烦粒，指的是瀏覽器不能執(zhí)行其他網(wǎng)站的腳本。它是由瀏覽器的同源策略造成的蚤氏，是瀏覽器對(duì)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典蝌，跨域）- 請(qǐng)注意：localhost和127.0.0.1雖然都指向本機(jī)，但也屬于跨域头谜。
- 瀏覽器執(zhí)行javascript腳本時(shí)骏掀，會(huì)檢查這個(gè)腳本屬于哪個(gè)頁面，如果不是同源頁面柱告，就不會(huì)被執(zhí)行截驮。
-
是誰造成了跨域？
瀏覽器造成的跨域
-
是誰造成了跨域？
-
為什么會(huì)有跨域际度？
為了數(shù)據(jù)的安全
-
為什么會(huì)有跨域际度？
-
- 在開發(fā)中葵袭，你是如何解決跨域的問題？
- jsonp解決跨域
- 往瀏覽器當(dāng)中安裝插件
-
- jsonp與Ajax有關(guān)系嗎
- 沒有乖菱。
- Ajax是JavaScript提供的方法坡锡。用于請(qǐng)求數(shù)據(jù)，當(dāng)跨域的時(shí)候窒所，拿不到數(shù)據(jù)鹉勒。
- jsonp是解決跨域的方案
-
- jsonp原理是怎么實(shí)現(xiàn)的
- 借助標(biāo)簽的src屬性進(jìn)行數(shù)據(jù)請(qǐng)求
- 使用src,請(qǐng)求數(shù)據(jù)
- 在本地聲明一個(gè)方法
- 要在服務(wù)端處理跨域
- jsonp的原理1（原生的方式）
在本地聲明一個(gè)方法
<script>
function fn() {
alert("執(zhí)行了前端的alert方法")
}
</script>
使用src,請(qǐng)求數(shù)據(jù)
<script src="06-jsonp.php"></script>
要在服務(wù)端處理跨域
echo "fn()";
該方法能夠解決跨域的問題，但是方法被寫死不靈活吵取。下面的方法將函數(shù)名傳遞過去禽额。
- 9. jsonp的原理1（原生的改進(jìn)）
在本地聲明一個(gè)方法
<script>
function wmx() {
alert("wmx函數(shù)執(zhí)行了前端的alert方法")
}
</script>
使用src,請(qǐng)求數(shù)據(jù)
//將函數(shù)名作為參數(shù)傳遞過去
<script src="07-jsonp.php?callback=wmx"></script>
要在服務(wù)端處理跨域
$res = $_GET['callback'];
//使用點(diǎn)進(jìn)行連接
echo $res."()";
- 10.jsonp的原理1（原生：實(shí)現(xiàn)服務(wù)端返回?cái)?shù)據(jù)給前端）
在本地聲明一個(gè)方法
<script>
function wmx(args) {
alert(args)
}
</script>
使用src,請(qǐng)求數(shù)據(jù)
//將函數(shù)名作為參數(shù)傳遞過去
<script src="07-jsonp.php?callback=wmx"></script>
要在服務(wù)端處理跨域
$res = $_GET['callback'];
//使用點(diǎn)進(jìn)行連接
echo $res."('這是服務(wù)端返回的數(shù)據(jù)')";
-
演示跨域的實(shí)現(xiàn)1（使用jsonp的方法解決跨域）
借用豆瓣API模擬
https://api.douban.com/v2/book/1220562具體實(shí)現(xiàn)
在本地聲明一個(gè)方法
<script>
function wmx(args) {
alert(args);
console.log(args);
}
</script>
使用src,請(qǐng)求數(shù)據(jù)
//豆瓣API可接受callback參數(shù)，使返回的數(shù)據(jù)為jsonp皮官。
//callback只能包含數(shù)字脯倒、字母、下劃線臣疑，長(zhǎng)度不大于50
<script src="https://api.douban.com/v2/book/1220562?callback=wmx"></script>
-
演示跨域的實(shí)現(xiàn)2（AngularJS中處理跨域：封裝原生jsonp）
在不同的域內(nèi)新建一個(gè)文件盔憨，地址為
http://localhost/mine/09.php具體實(shí)現(xiàn)
使用angularJS實(shí)現(xiàn)跨域（原理：jsonp）
核心代碼：（必須按照嚴(yán)格來寫徙菠，不能寫錯(cuò)）
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>
后臺(tái)的數(shù)據(jù)
$res = $_GET['callback'];
echo $res."('我是跨域獲取后的數(shù)據(jù)啦啦啦')";
內(nèi)部實(shí)現(xiàn)的原理：
- 幫你創(chuàng)建了一個(gè)script標(biāo)簽 src=url
- 創(chuàng)建聲明了一個(gè)
function angular.callbacks._0(args){args}
- 服務(wù)器接收
