跨域
- 1.什么是跨域？
- 不同域名之间进行数据的访问。会造成跨域问题。导致的结果就是拿不到数据
http://localhost/day2/06-%E8%B7%A8%E5%9F%9F.html
https://api.douban.com/v2/book/1220562
- 如何区分是否跨域?
就看是否同源。（要求：协议，端口号，主机地址相同）
不同源就是属于跨域。 - 2.是谁造成的跨域？
- 是浏览器造成的跨域，其实数据已经到了浏览器当中，只不过，浏览器没有把数据传递过来。
- 3.为什么要有跨域？
- 出于安全考虑。（默认情况下不允许外界的网站向本网站当中注入数据）
- 4.如何解决跨域？
- 使用jsonp （jsonp是解决跨域的一种方案。）
- 5.jsonp是ajax吗？
- jsonp是解决跨域的一种方案。
- ajax它是js异步请求一种技术。（xhr对象）
- 6.说一下jsonp解决跨域的原理？
- 1.在本地当中定义一个方法名gxq
- 2.定义"<script src="myPhpFile.php？callback=gxq">" 在发送请求时，把函数名称传递给服务器
------------上面2步是前端做的--------------
------------下面2步是后端做的-------------- - 3.要在服务器当中接收传递的参数 $fn = $_GET['callback'];
-
4.服务echo 方法名称+('参数')，下面的1就是服务器传递的参数到客户端;
- 注意：src可以访问任何地址。
angular跨域
<script src="angular.js"></script>
<script>
//1.创建模板
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController', ['$scope','$http', function ($scope,$http) {
$http({
url:'https://api.douban.com/v2/book/1220562', //访问的url地址
method:'jsonp', //访问方式
params:{
callback:'JSON_CALLBACK' //传递过去的参数
}
}).success(function (res) {
alert(res);
}).error(function (error) {
});
}]);
//3.绑定模块
//4.绑定控制器
</script>
</head>
<body ng-app="app" ng-controller="xmgController">
</body>
angular1.6版本之后跨域
<script src="angular1.6.js"></script>
<script>
//1.创建模板
var app = angular.module('app', []);
//设置一个白名单。
app.config(['$sceDelegateProvider',function ($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://api.douban.com/**']);//!*当前文件代表所有文件 **所有文件夹下的所有文件。
}]);
//2.创建控制器
app.controller('xmgController', ['$scope','$http', function ($scope,$http) {
$http({
url:'https://api.douban.com/v2/book/1220562',
method:'jsonp',
}).then(function (res) {
}).catch(function () {
});
}]);
//3.绑定模块
//4.绑定控制器
</script>
</head>
<body ng-app="app" ng-controller="xmgController">
</body>
使用php做桥接获取数据
- 1.在qwl.php服务器中向某个接口获取数据
$url = "https://api.douban.com/v2/book/1220562"; //获取数据到服务器
echo file_get_contents($url); //显示出来
- 2.在html客户端中向qwl.php服务器发送请求获取数据
<script src="angular.js"></script>
<script>
//1.创建模板
var app = angular.module('app', []);
//2.创建控制器
app.controller('xmgController', ['$scope','$http', function ($scope,$http) {
$http({
url:'qwl.php', //向谁访问数据
method:'get' //用什么方式访问
}).success(function (res) {
console.log(res);
}).error(function (error) {
});
}]);
//3.绑定模块
//4.绑定控制器
</script>
</head>
<body ng-app="app" ng-controller="xmgController">
</body>
网友评论