同源，跨域，JSONP原理剖析

同源和跨域这两个名词一直是相对存在的。

同源：

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。

跨域：

不同源则为跨域，跨域不允许进行DOM操作，也不允许发送ajax。

*关于同源和跨域大家可以看下面这张表，相信可以很清晰的理解。

跨域方案

1、顶级域名相同的可以通过domain.name来解决，即同时设置 domain.name = 顶级域名（如example.com）

2、document.domain+ iframe3、window.name+ iframe

4、location.hash+ iframe

5、window.postMessage()

以上几种方案都是只能在某一特定情形下使用，兼容性和实用性都不太好，大家可以只做了解，而我们一般跨域都是用JSONP去实现

也许大家现在对跨越感觉还是比较陌生，但我相信，在之前的开发学习过程中肯定也发送过跨域请求。

<a href="http://www.baidu.com">我的百度</a>
<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1105037253,1131367531&fm=27&gp=0.jpg" alt="">

这两个标签相信大家都不陌生，然而现在已经实现了跨域，也许看到这里你会焕然大悟，利用a标签的href属性，和img标签的src属性，没关系如果不明白，我们继续往下看。

这两个标签都有天然的跨域特性，所以跨域的实现跟他们少不了关系

src: img标签

href: a标签 script标签

仔细回想一下在以往开发过程中，有没有用过script 去引用网上的资源？我们接下来就利用script标签src的天然跨域特性来实现跨域操作。

首先我们先写一个名为corss的php页面用来传递数据，（关于php的知识大家可以看我关于php的博客）

<?php   ---- php代码需要包裹在其中
    echo "abc"; // echo 是php中的输出语句,相当于javascript中的 console.log(“abc”);
?>    ---- php代码需要包裹其中

接着我们创建一个html页面，添加一对script 标签，src请求路径为上面的php文件

<script src="corss.php"></script>

然后在浏览器打开html页面控制台会报这样一个错。

你也许会想abc is not defined 什么鬼？

因为我们是使用script标签来发送请求的，所以返回的默认值会以script所支持的javascript请求来解析。

为了验证上面这句话，看看返回的结果是不是真的会以javascript的语法来解析，我们来更改一下php页面返回的值.

<?php
    echo "alert(123)"; // 如果返回值按照javascript的语法解析，那么运行html将会出现一个弹出框显示123
?>

果然没有出乎我们的意料

好接下来我们便利用这一特性在做一些更改，

首先我们在html页面定义一个函数，并把函数名通过拼接url请求php页面

   <script>
        function fn() {
            console.log("能不能打印输出呢？");
        }
    </script>  
    <script src="corss.php?callBack=fn"></script> // 通过url拼接参数方式把函数名发送给后台

php页面呢，只需接受html页面传递的函数名，并通过字符串拼接的方式，返回函数的调用。

<?php
    $callBack = $_GET["callBack"]; // 获取html页面传递的数据,此时$callBack 就是 fn 
    echo $callBack."()";  // . 是php 中字符串拼接的方法，等同于javascript中的  fn + "()"
?>

运行html页面看能否输出打印？

显然是可行的。

到了现在我们可以真正的去实现一个基本的跨域请求数据了，具体请看下面代码。

html页面

  <script>
        function fn(data) { // 我们通过data 来接收后台传递的数据
            console.log(data); 
        }
    </script>  
    <script src="corss.php?callBack=fn"></script>

php页面

<?php
    $callBack = $_GET["callBack"]; // 获取html页面传递的数据,此时$callBack 就是 fn 
    $data = file_get_contents("nav.json"); // php 读取文件内容方式, $data 中存储的就是我们需要的数据
    echo $callBack."(".$data.")";  // . 是php 中字符串拼接的方法 
?>

php后台部分，返回函数调用形式，并把读取json文件中数据以参数的形式返回给前端。

html前端部分，先通过url拼接参数把实现定义好的函数名发送给后台。

执行结果如下

这样我们就可以很轻而易举实现跨域并拿到后传递的数据。

同源，跨域，JSONP原理剖析

猜你喜欢