同源和跨域

同源：协议相同 、 域名相同、端口相同

          比如：同源的：https：//www.baidu.com/index.html

                                     https://www.baidu.com/lsit.php

                    不同源： https://www.taobao.com/80

                                    https://www.jd.com/:80

跨域：不同域名下面的通信来往

同源策略：

目的：为了保证用户的信息安全，防止恶意的网站窃取信息

同源策略的限制范围，在跨域的情况下：

（1）cookie 、localStorage  无法获取

（2）DOM无法获取

（3）Ajax不能发送

 

跨域请求的方法：

1. jsonp：请求

2.Html5  中新规范的CORS功能，只要在目标服务器返回的请求头加上Access-Concrol-Allow-Origin:* 即可

3.通过内部服务器代理，实现跨域

4.<img><script> < link> < ifram>  通过src,href属性设置为目标，url实现跨域请求

不同源就是跨域，跨域访问会产生安全问题，但是日常开发也会有不好的影响比如实际开发过程中，往往都会把服务器端架设到一台甚至是一个集群的服务器中，把客户端页面放到另外一个单独的服务器。那么这时候就会出现不同源的情况，如果我们知道两个网站都是安全的话，我们是希望两个不同源的网站之间可以相互请求数据的。这就需要使用到**跨域**

 

下面介绍跨域的两种方法：jsonp  cors跨域

1 -jsonp： jsonp的本质就是利用script 的src属性跨域请求的服务器

jsonp请求服务的步骤：

1. 1. 前端首先定义好一个方法，利用script把方法名传给后台
2. 后台获取到方法名 ，然后在把方法名后面拼接括号，在向括号中填充json数据
3. 后台会返回，填充好的数据的方法调用
4. 前端会接收到后台返回的方法调用，立即当做js执行即可获取到后台填充的参数

代码：

（1）前端首先定义好方法，用script  传给后台

<script>
//前端有渲染数据方法，缺数据 
function say(obj) {
alert('你好' + obj.name);
}
var obj = {
name: 'zs'
}
</script>
<!-- 利用script标签将方法名传递给后台  callback -->
<script src="http://localhost/PHP-class++++/Ajax/06-Ajax/day05/00%20-test/02-test.php?callback=say"></script>  

注意：这里是在a服务器打开，scr里面的地址是b服务器中的后台，这样来模拟跨域请求资源

（2）后台接收前端的数据

$info = [
"name" => "xiaoming",
"age" => 16
];
$info = json_encode($info); //{"name":"xm", "age": 16}
echo $_GET['callback'].'('.$info.')'; // say({"name":"xm", "age": 16});字符串的拼接
//相当于：/echo say({"name":"xm", "age": 16}); json with padding  传到前端直接js执行了

jsonp注意点：jsonp只能发送get请求，并且需要后台配合

 

2.CORS跨域   资源共享

资源共享只需要在后台设置，允许访问即可

header（‘Access-Control-Allow-Oriangin’ ， 域名）：域名为*  就表示都可以进行访问

//允许所有的域名访问这个接口
header("Access-Control-Allow-Origin:*");
//允许locahost访问
header("Access-Control-Allow-Origin:http://localhost");