跨域

1.什么情况下是跨域

在不同的域下
例如 www.a.comwww.b.com
父域与子域
www.qq.comnews.qq.com
不同的协议
http://www.a.comhttps://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本身也不排斥同域的数据的获取。

可以利用后端进行跨域

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容