什么是跨域
说到跨域必须先解释什么是同源策略，它是由Netscape提出的一个著名的安全策略。浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。
首先我们来复习下一个完整的url组成
https://www.baidu.com:8080/aaa/1.html?id=10#name
window.location.portocol = https; //协议
window.location.host = www.baidu.com:8080; //域名
window.location.hostName = www.baidu.com;
window.location.port = 8080; //端口
window.location.search = ?id=10;
window.location.hash = #name;
还不是很熟悉的小伙伴可以参考下什么是域名？什么网站名？什么是URL？，搞懂这个才能理解好同源策略和跨域。
举例：
同源：
http://jirengu.com/a/b.js 和 http://jirengu.com/index.php
不同源
http://jirengu.com/main.js 和 https://jirengu.com/a.php (协议不同)
http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同，域名必须完全相同才可以)
http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一个是80)
**需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域 **
实际中我们经常需要到不同的域名下获得数据，由于同源策略的存在我们无法通过AJAX等方式直接获取数据 ，需要一些方法来实现跨域，主要的跨域方式有
- jsonp
- CORS (cross-origin-resource-shareing //iE10及以上支持)
- 降域 (具有局限性，只有是同属于一个域名的二级域名还能够使用这种方式)
- postMessage
下面就具体介绍下每一种跨域方式
1、jsonp
JSONP 的原理是script标签的src属性不受同源策略影响，网页通过添加一个元素，相当于向服务器发送了一个get请求，服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
举一个简单的例子
在目录下建立个名称为 1的txt文件，内容为 123，在index.html中使用srcipt标签请求文本文件
文件目录
打开控制台查看请求，在Response中我们成功的拿到1.txt中的数据123。但是，我们虽然拿到了数据但却没有办法使用~！！！这时候有人就想到了用函数调用方式，将服务器传过来的数据以函数参数的方式调用
修改文本中的数据
相当于这种写法
这里就相当于调用了函数fn,实际中调用的这个函数名也事先约定好的，发送请求实际上就是利用DOM操作在文档中添加一个script标签请求数据，注意这个请求的标签在请求完成后要删除
一个完整的JSONP例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<style media="screen">
.newsFrame{
margin: 0 auto;
}
</style>
</head>
<body>
<div class="newsFrame">
<ul class="content">
<li>上学</li>
<li>消费</li>
<li>生活</li>
</ul>
<button class="btn">换一批</button>
</div>
<script type="text/javascript">
$('.btn').addEventListener('click',function(){
var script = document.createElement('script');
script.src='http://b.har.com:8080/getNews?callback=appendhtml';
document.head.appendChild(script);
document.head.removeChild(script);
})
function appendhtml(news){
var html = '';
for(var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>'
}
console.log(html)
$('.content').innerHTML = html
}
function $(id){
return document.querySelector(id)
}
</script>
</body>
</html>
后端
app.get('/getNews', function(req, res) {
var news = [
"看电视",
'大学在学习',
'大家在跑步',
'天气预报',
'我要吃饭',
'看电视'
]
var data = [];
for(var i=0; i<3; i++){
var index = parseInt(Math.random()*news.length);
data.push(news[index]);
news.splice(index,1);
}
var cb = req.query.callback;
res.send( cb + '(' + JSON.stringify(data) + ')' );
});
最后，JS中还有其他三个标签可以进行跨域请求img 、iframe、link(stylesheet)但他们都有缺陷
img
//支持跨域但是无法实现获取服务端返回的数据
<iframe src="https://www.baidu.com"></iframe>
//支持跨域，可以接收服务端数据，但是过程复杂
<link rel="stylesheet" type="text/css" href="https://www.baidu.com">
//会在CSS处理阶段报错
2、CORS
CORS全称跨域资源共享（crossing-origin resourse sharing），是一种ajax跨域 请求资源的方式，支持现代浏览器，支持IE10以上。实现的方式很简单，当你使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回的结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断响应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以，CORS的表象是让你觉得他与同源的AJAX的请求没啥区别，代码完全一样。
node的服务端
app.get('/getNews', function(req, res) {
var news = [
"看电视",
'大学在学习',
'大家在跑步',
'天气预报',
'我要吃饭',
'看电视'
]
var data = [];
for(var i=0; i<3; i++){
var index = parseInt(Math.random()*news.length);
data.push(news[index]);
news.splice(index,1);
}
res.header("Access-Control-Allow-Origin","http://a.jrg.com:8080");//CORS
//res.header("Access-Control-Allow-Origin","*");
res.send( data );
});
深入学习可以参考阮一峰老师的博客CORS
3、降域
降域主要应用在域名相同的网站之间的跨域。
举个例子
http://a.jrg.com:8080/a.html
http://b.jrg.com:8080/a.html
根据同源策略上面的两个网址是不是本域，但他们的域名相同，都是jrg.com所以可以通过降域的方式跨域 。具体的实现方法分别在对应的网页的JS中加入
document.domain = "jrg.com";
4、postMessage
postMessage作为html5新引入的API允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
语法
1、发送
otherWindow.postMessage(message, targetOrigin, [transfer]);
- otherWindow
其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。 - message
将要发送到其他 window的数据。它将会被[结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。 - targetOrigin
通过窗口的origin属性来指定哪些窗口能接收到消息事件，其值可以是字符串""（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。这个机制用来控制消息可以发送到哪些窗口；例如，当用postMessage传送密码时，这个参数就显得尤为重要，必须保证它的值与这条包含密码的信息的预期接受者的orign属性完全一致，来防止密码被恶意的第三方截获。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。 -
transfer
可选是一串和message 同时传递的 Transferable
对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。
2、监听
执行如下代码, 其他window可以监听派遣的message:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
// For Chrome, the origin property is in the event.originalEvent
// object.
var origin = event.origin || event.originalEvent.origin;
if (origin !== "http://example.org:8080")
return;
// ...
}
message 的属性有:
- data
从其他 window 中传递过来的对象。 - origin
调用 postMessage时消息发送方窗口的 origin。这个字符串由 协议、“://“、域名、“ : 端口号”拼接而成。 - source
对发送消息的窗口对象的引用; 您可以使用此来在具有不同origin的两个窗口之间建立双向通信。
网友评论