7.跨域
2017-05-27 本文已影响0人
miner敏儿
1.什么是跨域?
不同域名之间进行访问
2.同源策略?
协议,主机地址,端口都一致
3.是谁造成了跨域？
是浏览器造成的跨域。
4.为什么会有跨域？
为了数据的安全。
在网站中输入自己的用户名和密码,当记住用户名和密码时,浏览器就记住了你的用户名和密码,如果做得不安全的话,别人可以往你的网站中偷偷的注入代码,然后就可以访问浏览器的数据,他就可以把你的用户名和密码往自己的网站发送,但是域名不同,而浏览器又不允许跨域访问,所以安全性较高,就有了跨域这一说法
5.你在开发当中是如何解决跨域问题？
jsonp解决跨域
往浏览器当中安装插件(不建议使用,治标不治本)
5.jsonp与Ajax有关系嘛？
Ajax它是javascipt提供的方法，进行数据的请求。使用它请求数据时，跨域时拿到不数据。
jsonp解决跨域的一种方案。
6.jsonp原理是怎么做的？
借助标签的src属性进行数据请求。
1.使用src，请求数据
<script src="http://datainfo.duapp.com/shopdata/getGoods.php?callback=callback">
2.在本地声明一个方法
function callback(args) {
console.log(args);
}
3。要在服务端要处理跨域
$res = $_GET['callback'];
echo $res."('我是服务的数据')";
demo1:
<!--如果服务器返回的是js代码，那么浏览器就会直接执行js代码-->
<!--借助浏览器的这个特性来实现跨域-->
<script src='jsonp.php'></script>
jsonp.php中
echo 'alert("hello")';
运行结果:直接返回js代码的运行结果
image.png
demo2:
既然是服务器返回的是js代码时,浏览区可以直接运行js代码
那么我可以在服务器端直接输出一个函数
echo "fn()";
function fn(){
alert("执行了前端的alert");
}
弹出"执行了前端的alert"
demo3:
<script src=angular.js></script>
<script>
function fn(){
alert("执行了前端的alert");
}
/*浏览器从上往下走,先声明一个函数,
向jsonp发送一个请求 我告诉你传递了一个callback 然后用GET方式来接受callback,
接受的值是fn,所以php中res就是fn*/
</script>
<body>
<script src='jsonp.php?callback=fn'></script>
php:
$res=$_GET['callback'];/*res就是fn*/
echo $res."()";
/*给什么名称执行的就是哪个函数*/
image.png
demo4:
<script src=angular.js></script>
<script>
function fn(args){
alert(args);
}
/*浏览器从上往下走,先声明一个函数,
向jsonp发送一个请求 我告诉你传递了一个callback 然后用GET方式来接受callback,
接受的值是fn,所以php中res就是fn*/
</script>
<body>
<script src='jsonp.php?callback=fn'></script>
php:
/*也可以传递参数*/
echo $res."('我是服务器的数据')";
/*传参数,执行这个函数的时候必须有个参数*/
demo5:
<script>
function callback(args){
console.log(args);
}
</script>
<body>
<script src="http://datainfo.duapp.com/shopdata/getGoods.php?callback=callback"></script>
<!--为什么写callback
是因为在此网址中的network下面的preview中的方法名称是callback 如果不叫这个名字 运行不出来结果-->
</body>
拿到了数组,数组里有数据
跨域的步骤
使用src属性进行数据请求的时候出现的几种方式:
1.使用src，请求数据
<script src="http://datainfo.duapp.com/shopdata/getGoods.php? callback=callback">
2.在本地声明一个方法
function callback(args) {
console.log(args);
}
3.要在服务端要处理跨域
$res = $_GET['callback'];
echo $res."('我是服务的数据')";
$http跨域(angularJs跨域)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController", ["$scope", "$http", function ($scope, $http) {
//$http就相当于是对原生的Ajax进行封装,对Ajax进行跨域时拿不到数据,打印时拿不到,所以不能通过这种方式拿数据
$http({ /*http://localhost:63342/mywebstorm/%E5%B0%8F%E7%A0%81%E5%93%A5/%E7%BB%83%E4%B9%A0/angularJs/day03/7.$http.html?_ijt=31parnf386gfjv1vgmituhflrs 当前的路径*/
url: 'http://127.0.0.1/argular/day03/get.php', /*我现在要访问phpday03下面的get.post请求 我现在不在这个文件夹下面*/
method: 'get',
params: {
flag: 'zm'
}
}).success(function (regs) {
console.log(regs);
}).error(function (error) {
console.log(error);
})
/*看响应的结果 get.php status==200 响应成功*/
/*看respond里服务器的数据有没有给我们 就是要给我们 在打印台没有数据 并且还会报错*/
}]);
/*3.绑定模板*/
/*4.绑定控制器*/
</script>
<body ng-app='app' ng-controller='zmController'>
</body>
</html>
php
$res = $_GET['flag'];
if($res == "zm"){
echo "服务器数据";
}
else{
echo "非法数据";
}
打印时会报错,但是我已经拿到了响应结果.在network中可以看到"服务器数据"拿到了只是不给我,所以我不能使用这种方式,应该使用跨域的方式.
下面使用原生的jsonp的方案:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController", ["$scope", "$http", function ($scope, $http) {
}]);
//我们使用jsonp方式
/*2.声明一个方法*/
function callback(args){
console.log(args);
}
</script>
<!--1,请求一个路径地址-->
<script src="http://127.0.0.1/argular/day03/get.php?callback=callback"></script>
<!--3.在服务器段进行接收处理 在get.php中进行处理-->
<body ng-app='app' ng-controller='zmController'>
</body>
</html>
php
$callback = $_GET['callback'];
echo $callback."('我是服务器的数据')";
一下代码中使用angularJs帮我们在内部偷偷做了,第一步的标签就不需要了,第二步的声明函数也不需要我做了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src=angular.js></script>
<script>
/*1.创建模块*/
var app = angular.module('app',[]);
/*2.创建控制器*/
app.controller("zmController", ["$scope", "$http", function ($scope, $http) {
$http({
/*http://localhost:63342/mywebstorm/%E5%B0%8F%E7%A0%81%E5%93%A5/%E7%BB%83%E4%B9%A0/angularJs/day03/7.$http.html?_ijt=31parnf386gfjv1vgmituhflrs 当前的路径*/
url: 'http://127.0.0.1/argular/day03/get.php', /*我现在要访问phpday03下面的get.post请求*/
method: 'jsonp',
params: {
callback:'JSON_CALLBACK'/*内部自动帮我做跨域处理*/
/*
1.帮我创建了一个script标签src=url
2.创建声明了一个function angular.callbacks._0(){
args传入的数据
}
*/
}
}).success(function (regs) {
console.log(regs);
}).error(function (error) {
console.log(error);
})
}]);
</script>
<body ng-app='app' ng-controller='zmController'>
</body>
</html>
php
$callback = $_GET['callback']; //$callback他的值就是angular_0
echo $callback."('我是服务器的数据')";
