在介绍跨域之间，先了解一下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 .')'; //返回格式，必需
?>
网友评论