跨域

2016-10-05 本文已影响0人 Iswine

在介绍跨域之间，先了解一下URL的构成和同源策略的概念：
URL（Uniform Resource Locator）是统一资源定位符，即我们在浏览器搜索框中所看到的一长串类似于地址的符号。这里有一个完整的URL构成http://www.example.com:8080/path/index.html?a=1&b=2#TOP ，我们可以通过JS代码来获取其各部分：

location.propocal   // 'http'                  协议
location.hostname //'www.example.com'          域名
location.port      //'8080'                    端口号
location.host     //'www.example.com:8080'     域名+端口号
location.pathname // /path/index.html          路径  
location.search;  // '?a=1&b=2'                查询符
location.hash;   // 'TOP'                      哈希

故，一个完整的url应该是："协议" + :// + “域名” + “路径” + ： + “端口号” + ? + "查询符" + "哈希"；

同源策略

同源策略自1995年由网景公司引入浏览器后，就一直被所有浏览器沿用至今。其目的是为了保证网页的安全，防止外部随意的恶意窃取网页信息。所谓同源，即同时满足协议相同，域名相同，端口号相同三个条件。只有满足同源，才能够获取其它网站的Cookie，DOM，LocalStorage等信息，以及进行AJAX操作。显然，随着互联网的发展，不同域名下的网站之间相互调用信息是有必要的，这个时候我们就需要通过一些办法来规避同源策略的限制，这就是跨域。

跨域的方法

降域
降域的思想是将相同一级域名下的网站（二级域名，三级域名等等）均降至一级域名，例如：
01.example.com与01.02.example.com的一级域名都是example.com，我们在上述两个网页中的<script>中均添加document.domain = 'example.com';那么，这两个网页的Cookie与window.name便可以实现共享，由此我们可以通过其传递数据。
降域有两个很严重的问题：
1.安全性差，一个网站受到攻击，全部遭殃。
2.局限性大，只适用于相同一级域名的网站。
JSONP
JSONP是实现跨域AJAX的一种技巧。这一篇解释的很好
JSONP的由来：由于跨域AJAX请求资源是被浏览器禁止的，然而又存在大量的需求跨域AJAX的场景。此时，聪明的程序员发现但凡有src标签的均可以实现跨域，于是我们可以利用<script>标签，实现资源的跨域交互。实际上用任何一种数据格式都是可以的，但考虑到JSON的泛用性，人们往往通过JSON格式来包裹数据，这种方法就称之为JSONP。
JSONP的实现思路：网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
所以在客户端，需要做的两件事情：1.编写回调函数来获取数据；2.动态的生成JS。下面是分别为用原生JS和Jquery写的JSONP传递的例子
（url:http://api.money.126.net/data/feed/0000001,1399001 ）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p id="ggg"></p>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
         //编写回调函数，来规定想要获得的数据，服务器端（他们编写的代码）会自动生成新的URL(origin-url?callback = function)，其中是一段Javascript代码，回调函数中包裹了JSON格式的数据。
        function getData(data){
            var ggg = document.getElementById("ggg");
            ggg.innerHTML = "股票查询：" +
                        data["0000001"].name + ":" +
                        data["0000001"].price +  ";" +
                        data["1399001"].name + ":" +
                        data["1399001"].price;
        }
        //动态的生成<script>，其目的是：最后生成JSONP的<script>标签，保证能够正确的找到回调函数中的DOM节点。
        var script = document.createElement("script");
        script.src = "http://api.money.126.net/data/feed/0000001,1399001?callback=getData";
        document.getElementsByTagName("head")[0].appendChild(script);
        /*    Jquery的JSONP是直接在AJAX中实现的
        $.ajax({
            url: "http://api.money.126.net/data/feed/0000001,1399001",
            method:"get",
            dataType:"jsonp",                                      //选择jsonp
            jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback),可以不写这项
            jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据，也可以不写这项。
            success: function getData(data) {               //这里写入回调函数
                $("#ggg").html("股票查询：" +
                        data["0000001"].name + ":" +
                        data["0000001"].price +  ";" +
                        data["1399001"].name + ":" +
                        data["1399001"].price
                )
            },
            error: function () {
                alert("出错了");
            }
        });
        */
</script>
</body>
</html>

这样我们就从网易财经给的JSONP的API中获取了数据，并呈现在自己的网站上。

JSONP的好处在于简单方便，兼容性强，所以JSONP的应用率很广。
同时JSONP也有一些缺点：
1.<script>中的src属性是get方法，JSONP不能用于请求数特别大的情况。
2.由于<script>中可以被添加各种JS脚本，因此容易被外部添加恶意脚本，需要一些特殊的手法（如字符串替换）来防止被注入后带来的问题。

CORS(Cross Origin Resource Sharing)
CORS是HTML5特意规定的如何访问跨域资源的方法，网页进行跨域AJAX请求之前，会确认Access-Control-Allow-Origin是否包含了该网页的源，若不存在就会出现下图的错误，若存在则请求通过。

其用法是在服务器端添加header("Access-Control-Allow-Origin:想要添加的源");即可。
这个方法是最靠谱的，官方认定的正规途径，除了兼容性可能会有点问题外，几乎解决了其它方法的缺点，所以这种方法值得推崇，当然因为是服务器端设置，所以能否使用这种方法决定权并不在客户端。

接下来演示一下如何在本地服务器其中模拟跨域：

首先找到系统的hosts文件（windows系统的路径 C:\Windows\System32\drivers\etc）
默认情况下，只有localhost指向本地IP 127.0.0.1，在hosts文件中我们可以为其添加多个域名

打开浏览器输入不同的地址，均指向同一个网页，但是它们的域名是不一样的，所以并非同源。

这是网页中<script>

<script>    
        $.ajax({
            url: "http://www.01.example.com/1.php?",
            method:"get",
            dataType:"json",
            success: function handle(data) {
                $("#ggg").html("姓名：" +
                        data.name + "； 性别：" +
                        data.sex +  "； 年龄：" +
                        data.age + "。" 
                )
            },
            error: function () {
                alert("出错了");
            }
        });
</script>

这是所对应的PHP文件

<?php
    $arr = array();
    $arr["name"] = "xiaoming";
    $arr["age"] = 18;
    $arr["sex"] = "male";
    
    echo json_encode($arr);
?>

这是在localhost域名下打开，显然这只是一个单纯的AJAX请求，而进行跨域操作一定是会报错的：

解决方法：

CORS
更改服务器端文件：

<?php
    header('Access-Control-Allow-Origin: http://www.01.02.example.com');
    $arr = array();
    $arr["name"] = "xiaoming";
    $arr["age"] = 18;
    $arr["sex"] = "male";
    
    $callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; 
    $tmp= json_encode($arr); //json 数据
    echo $tmp;
?>

JSONP
页面：

<script>    
        $.ajax({
            url: "http://www.01.example.com/1.php",
            method:"get",
            dataType:"jsonp",
            success: function handle(data) {
                $("#ggg").html("姓名：" +
                        data.name + "； 性别：" +
                        data.sex +  "； 年龄：" +
                        data.age + "。" 
                )
            },
            error: function () {
                alert("出错了");
            }
        });
</script>

服务器

<?php
    $arr = array();
    $arr["name"] = "xiaoming";
    $arr["age"] = 18;
    $arr["sex"] = "male";
    
    $callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数，必需
    $tmp= json_encode($arr); //json 数据
    echo $callback . '(' . $tmp .')';  //返回格式，必需
?>

跨域

同源策略

跨域的方法

接下来演示一下如何在本地服务器其中模拟跨域：

猜你喜欢

热点阅读