跨域 - 简书

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本身也不排斥同域的数据的获取。

跨域

跨域