什么是跨域?
在介绍跨域之前,我们先来了解下一个域名地址的组成:
JS 出于安全方面的考虑,不允许跨域调用其他页面的对象,那什么是跨域呢,简单地理解就是因为浏览器同源策略的限制,a.com 域名下无法操作 b.com 或是 c.a.com 域名下的对象。
当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。例如:http://www.itcast.cn/index.html 请求 http://www.itheima.com/path/to/api。
注意:跨域并不是请求发不出去,请求能发出去,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了。之所以会跨域,是因为受到了同源策略的限制,同源策略要求源相同才能正常进行通信,即协议、域名、端口号都完全一致。
大家可以参照如下表格来理解跨域:
# | URL | 说明 | 是否允许通信 |
---|---|---|---|
1 | http://www.a.com/a.js http://www.a.com/b.js | 同一域名下 | 允许 |
2 | http://www.a.com/lab/a.js http://www.a.com/script/b.js | 同一域名下不同资源地址 | 允许 |
3 | http://www.a.com:8080/a.js http://www.a.com/b.js | 同一域名,不同端口 | 不允许 |
4 | http://www.a.com/a.js https://www.a.com/b.js | 同一域名,不同协议 | 不允许 |
5 | http://www.a.com/a.js http://20.33.23.61/b.js | 域名与域名对应的IP | 不允许 |
6 | http://www.a.com/a.js http://script.a.com/b.js | 主域名相同,子域名不同 | 不允许 |
7 | http://www.a.com/a.js http://a.com/b.js | 主域名相同,子域名不同 | 不允许 |
8 | http://www.itcast.cn/a.js http://www.a.com/b.js | 不同域名 | 不允许 |
补充说明:
- 如果是协议和端口造成的跨域问题“前台”是无能为力的。
- 在跨域问题上,域仅仅是通过”URL 的首部”来识别,而不会根据域名对应的IP地址是否相同来判断。如上表中的范例5,“URL的首部”可以理解为“协议,、域名、端口”。
什么是同源策略及其限制?
同源策略限制一个源的资源(文档或脚本)如何与另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。它的存在可以保护用户隐私信息、防止身份伪造等。
同源策略限制内容有:
- Cookie、LocalStorage、IndexedDB 等存储性内容
- DOM 节点
- AJAX 请求不能发送
但是有三个标签是允许跨域加载资源的:
<img src="path/to/xxx">
<link href="path/to/xxx">
<script src="path/to/xxx"></script>
处理跨域的方法
所有的跨域都必须经过对方的允许。如果未经允许即可获取,那是浏览器同源策略出现漏洞。
方法1:JSONP
原理
利用 <script>
标签的这个开放策略,网页可以得到从其他来源动态产生的 JSON 数据。JSONP 请求一定需要对方的服务器做支持才可以。
与 AJAX 对比
JSONP 和 AJAX 相同,都是客户端向服务器端发送请求,从服务器端获取数据的方式。但 AJAX 属于同源策略,JSONP 属于非同源策略(跨域请求)。
优缺点
优点:兼容性好,可用于解决主流浏览器的跨域数据访问的问题。
缺点:仅支持 GET 方法,具有局限性。
流程
- 声明一个回调函数,其函数名 (如 fn) 当做参数值,要传递给跨域请求数据的服务器,函数形参为要获取目标数据 (服务器返回的 data)。
- 创建一个
<script>
标签,把那个跨域的 API 数据接口地址,赋值给 script 的 src,还要在这个地址中向服务器传递该函数名(可以通过问号传参?cb=fn
)。 - 服务器接收到请求后,需要进行特殊的处理,把传递进来的函数名和它需要给你的数据拼接成一个字符串,例如:传递进去的函数名是 fn,它准备好的数据就是
fn([{"name":"heima"}, ...])
。 - 最后服务器把准备的数据通过 HTTP 协议返回给客户端,客户端执行其响应数据,调用之前已经声明好的函数(fn),对返回的数据进行操作。
<script>
function fn(data) {
console.log(data);
}
</script>
<script src="http://crossdomain.com/path/to/api?cb=fn"></script>
其中 fn 是客户端注册的回调的函数,目的获取跨域服务器上的 JSON 数据后,对数据进行在处理。
最后服务器返回给客户端数据的格式为:
fn([{"name":"heima"}, ...])
由于是 script
标签请求的,所以这里会当做 JS 来执行,就会调用到之前已经声明好的 fn 函数了。
jQuery 的 JSONP 形式
$.ajax({
url: "http://crossdomain.com/jsonServerResponse",
dataType: "jsonp",
type: "GET", // 可以省略
jsonp: "cb", // 函数名形参,默认为 callback
jsonpCallback: "fn", // 函数名,默认 jQuery 自动生成
success: function (data) {
console.log(data);
}
});
方法2:CORS (跨站资源共享)
原理
整个 CORS 通信过程,都是浏览器自动完成,不需要用户参与。
对于开发者来说,CORS 通信与同源的 AJAX 通信没有差别,代码完全一样。
浏览器一旦发现 AJAX 请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。
因此,实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口,就可以跨源通信。
优缺点
优点:功能更加强大支持各种 HTTP Method
缺点:兼容性不如 JSONP
CORS 要求浏览器 (> IE10) 和服务器的同时支持,是跨域的根本解决方法,由浏览器自动完成。
范例:网站 http://localhost:6000/
要请求 http://localhost:3000/user/list
,list 页面返回 JSON 字符串格式:{ name:'heima', gender:'male', age:18 }
:
router.get("/user/list", function (req, res, next) {
var user = { name: 'heima', gender: 'male', age: 18 };
// 这一句
res.writeHeader(200, { "Access-Control-Allow-Origin": "http://localhost:6000" });
res.write(JSON.stringify(user));
res.end();
});
在响应头上添加 Access-Control-Allow-Origin
属性,指定同源策略的地址。同源策略默认地址是网页的本身。只要浏览器检测到响应头带上了 CORS,并且允许的源包括了本网站,那么就不会拦截请求响应。
方法3:WebSocket
Websocket 是 HTML5 的一个持久化的协议,它实现了浏览器与服务器的全双工通信,同时也是跨域的一种解决方案。
WebSocket 和 HTTP 都是应用层协议,都基于 TCP 协议。但是 WebSocket 是一种双向通信协议,在建立连接之后,WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时,WebSocket 在建立连接时需要借助 HTTP 协议,连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。
原生 WebSocket API 使用起来不太方便,我们使用 Socket.io,它很好地封装了 webSocket 接口,提供了更简单、灵活的接口,也对不支持 webSocket 的浏览器提供了向下兼容。
前端代码:
<div>user input:<input type="text"></div>
<script src="path/to/socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');
// 连接成功处理
socket.on('connect', function () {
// 监听服务端消息
socket.on('message', function(msg) {
console.log('data from server: ---> ' + msg);
});
// 监听服务端关闭
socket.on('disconnect', function () {
console.log('Server socket has closed.');
});
});
document.getElementsByTagName('input')[0].onblur = function() {
socket.send(this.value);
};
</script>
Node.js 后台代码:
var http = require('http');
var socket = require('socket.io');
// 启动HTTP服务
var server = http.createServer(function (req, res) {
res.writeHead(200, {
'Content-type': 'text/html'
});
res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');
// 监听socket连接
socket.listen(server).on('connection', function (client) {
// 接收信息
client.on('message', function (msg) {
client.send('hello:' + msg);
console.log('data from client: ---> ' + msg);
});
// 断开处理
client.on('disconnect', function () {
console.log('Client socket has closed.');
});
});
方法4:postMessage
如果两个网页不同源,就无法拿到对方的 DOM。典型的例子是 iframe 窗口和 window.open
方法打开的窗口,它们与父窗口无法通信。HTML5 为了解决这个问题,引入了一个全新的 API:跨文档通信 API(Cross-document messaging)。这个 API 为 window 对象新增了一个 window.postMessage
方法,允许跨窗口通信,不论这两个窗口是否同源。
postMessage
方法参数列表:
- 第一个参数是具体的信息内容
- 第二个参数是接收该消息的窗口的源(origin),即:“协议 + 域名 + 端口”,也可以设为
*
,表示不限制域名,向所有窗口发送。
范例: http://localhost:6000/index.html
页面向 http://localhost:3000/index.html
传递“跨域请求信息”
发送信息页面 http://localhost:6000/index.html
代码:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域请求</title>
</head>
<body>
<iframe src="http://localhost:3000/user/reg" id="frm"></iframe>
<input type="button" value="OK" onclick="run()">
</body>
</html>
<script>
function run() {
var frm = document.getElementById("frm");
frm.contentWindow.postMessage("跨域请求信息", "http://localhost:3000");
}
</script>
接收信息页面 http://localhost:3000/index.html
代码:
window.addEventListener("message", function (e) {
// 通过监听message事件,可以监听对方发送的消息。
console.log(e.data); // 跨域请求信息
}, false);