1.什么情况下是跨域
在不同的域下
例如 www.a.com与www.b.com
父域与子域
www.qq.com 与 news.qq.com
不同的协议
http://www.a.com 与https://www.a.com
不同的端口号
loalhost:8000 与localhost:80
如何跨域
1. JSONP
JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了.
利用script标签的src属性
在a域下
//jsonp
function bb(data){
alert(data.age+" haha");
}
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
var script = document.createElement('script');
script.src="http://www.b.com/index1.php?name=lisi&age=19&callback=bb";
document.body.appendChild(script);
}
在b域下
$name = $_GET['name'];
$age = $_GET['age'];
$callback = $_GET['callback'];
//echo 'aa("'.$name.'")';
echo $callback.'({"name":"'.$name.'","age":"'.$age.'"})'
2. iframe标签
利用src属性 不会执行代码 加到body里 iframe识别的是标签
包一个script标签 自动加到header里
子页面里不能访问父页面的方法 可以用 top
top可以访问父页面的方法,但是不能跨域
a域下 index2.html
a.com
<script>
//iframe
function aa(data){
alert(data);
}
</script>
<iframe src="http://www.b.com/index2.php?name=zhangsan"></iframe>
b域下 index2.php
$name = $_GET['name'];
<iframe src="http://www.a.com/index3.php?name=<?php echo $name ?>"></iframe>
解决top不跨域的方法是在a域下新建一个index3.php 用来接数据,利用top调用index2.php的函数返回数据
$name = $_GET['name'];
echo "<script>top.aa('".$name."')</script>";
a域名下有index1.html发送了数据 在index1里面iframeb访问域名b下的index2. php 在index2里面取到get提交的值,在index2里iframeb访问域名a下的index3.php,在index3里使用top即可调用index1下的方法
3.ajax 服务器代理
a域下
<!--ajax服务器代理-->
<script>
$.get("http://www.b.com/index4.php",function(data){
alert(data);
});
</script>
b域下,也就是后台
header("Access-Control-Allow-Origin:http://www.a.com");
echo 'hhh';
服务端代理
a.com 到b.com
我们在b.com的源上设置一个代理,通过这个代理传递数据到a.com,这个代理负责和a.com进行通信,这在服务器端是很容易实现的.
ajax 和jsonp
ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理
但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本
ajax 同源策略
jsonp 跨域获取数据
但是ajax通过服务端代理一样可以实现跨域,jsonp本身也不排斥同域的数据的获取。