跨域

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 
    
    

b域下 index2.php

$name = $_GET['name'];

解决top不跨域的方法是在a域下新建一个index3.php 用来接数据,利用top调用index2.php的函数返回数据

$name = $_GET['name'];
echo "";

a域名下有index1.html发送了数据 在index1里面iframeb访问域名b下的index2. php 在index2里面取到get提交的值,在index2里iframeb访问域名a下的index3.php,在index3里使用top即可调用index1下的方法

3.ajax 服务器代理

a域下


   

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的核心则是动态添加

你可能感兴趣的:(跨域)