-
- 什么是 跨域
- 不同域名之间进行访问。
- 跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制
-
- 同源策略？
- 所谓同源是指域名，协议，端口均相同。
- 例子如下
http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域） http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域） http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域） http://www.123.com:8080/index.html 调用http://www.123.com:8081/server.php （端口不同:8080/8081，跨域） http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）- 请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。
- 浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。
-
是谁造成了跨域？
浏览器造成的跨域
-
是谁造成了跨域？
-
为什么会有跨域？
为了数据的安全
-
为什么会有跨域？
-
- 在开发中，你是如何解决跨域的问题？
- jsonp解决跨域
- 往浏览器当中安装插件
-
- jsonp与Ajax有关系吗
- 没有。
- Ajax是JavaScript提供的方法。用于请求数据，当跨域的时候，拿不到数据。
- jsonp是解决跨域的方案
-
- jsonp原理是怎么实现的
- 借助标签的src属性进行数据请求
- 使用src,请求数据
- 在本地声明一个方法
- 要在服务端处理跨域
- jsonp的原理1（原生的方式）
在本地声明一个方法
<script>
function fn() {
alert("执行了前端的alert方法")
}
</script>
使用src,请求数据
<script src="06-jsonp.php"></script>
要在服务端处理跨域
echo "fn()";
该方法能够解决跨域的问题，但是方法被写死不灵活。下面的方法将函数名传递过去。
- 9. jsonp的原理1（原生的改进）
在本地声明一个方法
<script>
function wmx() {
alert("wmx函数执行了前端的alert方法")
}
</script>
使用src,请求数据
//将函数名作为参数传递过去
<script src="07-jsonp.php?callback=wmx"></script>
要在服务端处理跨域
$res = $_GET['callback'];
//使用点进行连接
echo $res."()";
- 10.jsonp的原理1（原生：实现服务端返回数据给前端）
在本地声明一个方法
<script>
function wmx(args) {
alert(args)
}
</script>
使用src,请求数据
//将函数名作为参数传递过去
<script src="07-jsonp.php?callback=wmx"></script>
要在服务端处理跨域
$res = $_GET['callback'];
//使用点进行连接
echo $res."('这是服务端返回的数据')";
-
演示跨域的实现1（使用jsonp的方法解决跨域）
-
借用豆瓣API模拟
https://api.douban.com/v2/book/1220562 -
具体实现
在本地声明一个方法
-
<script>
function wmx(args) {
alert(args);
console.log(args);
}
</script>
使用src,请求数据
//豆瓣API可接受callback参数，使返回的数据为jsonp。
//callback只能包含数字、字母、下划线，长度不大于50
<script src="https://api.douban.com/v2/book/1220562?callback=wmx"></script>
-
演示跨域的实现2（AngularJS中处理跨域：封装原生jsonp）
-
在不同的域内新建一个文件，地址为
http://localhost/mine/09.php -
具体实现
使用angularJS实现跨域（原理：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>
后台的数据
$res = $_GET['callback'];
echo $res."('我是跨域获取后的数据啦啦啦')";
内部实现的原理：
- 帮你创建了一个script标签 src=url
- 创建声明了一个
function angular.callbacks._0(args){args}
- 服务器接收
网友评论