第一部分: 内容提要
介绍下跨域的三种常见方式:
- JSONP (常用,兼容性好)
- CORS (简单,效率)
- postMessage (小众,安全,局限)
第二部分: 前置知识
在聊跨域之前,我们需要知道什么是跨域,为什么要跨域. 那是因为浏览器有同源策略的存在.
什么是同源策略呢?
它是浏览器基于安全保护而应运而生的一种安全模型,它控制着网页中DOM之间的访问
一款浏览器不可能让A域名去执行B域名的JavaScript代码(除非B域名开发了外链数据接口), 这样会造成数据污染,难以清理.
同源的意思是: 同协议 && 同域名 && 同端口 ( 三者同时都要满足 才 叫 同源)
http://abc.com/main.js 与 https://abc.com/main.php 不同源 (协议不同)
http://abc.com/main.js 与 http://cba.com/main.php 不同源 (域名不同,域名须一致)
http://abc.com/main.js 与 https://abc.com:8080/a.php 不同源 (端口不同, 第一个是80)
那是什么是跨域呢?
因为有浏览器同源策略的存在, 就有了跨域的需求.
a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，所进行的访问行动过程就是跨域.
第三部分: 跨域的实现
跨域实现方法一: JSONP
原理:
- 我们知道, 在网上使用一些标签的 scr.link..herf..等属性去get网络上的一些静态资源,
这表明这些 scr.link..等没有受到同源策略的限制. 这给JSONP跨域的实现提供了契机.. - 我们还知道到同源策略是浏览器的安全机制模型,
如果把它掰开来看就是: 一个请求发出去->一定会得到了响应和需求的数据,
但是在最后传输到浏览器的最后门口,被的同源策略给拒之门外. - 问题来了, 怎么让请求的数据不被拒之门外呢? ....
我们可以让请求端声明一个函数,让后端来执行这个函数,
参数携带数据回来,这里有个前提是: 参数的命名,须前后端事先约好. - JSONP核心就是这个参数(callback), get请求发出去, 应用callback 函数参数来 获取请求的数据.
实现过程:
在当前所在html中创建一个srcipt标签，将src设置为接口地址，
服务器那边以获取callback中的参数值+要发送的数据以json字符串的形式回应，
页面获取到数据调用同callback参数值的方法名来展现数据
JSONP演示案例:
server.js
var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')
http.createServer(function(req, res){
var pathObj = url.parse(req.url, true)
switch (pathObj.pathname) {
case '/getNews':
var news = [
"第11日前瞻：中国冲击4金 博尔特再战200米羽球",
"正直播柴飚/洪炜出战 男双力争会师决赛",
"女排将死磕巴西！郎平安排男陪练模仿对方核心"
]
res.setHeader('Content-Type','text/json; charset=utf-8')
if(pathObj.query.callback){ // 核心代码, 应用callback传回参数给页面定义的函数
res.end(pathObj.query.callback + '(' + JSON.stringify(news) + ')')
}else{
res.end(JSON.stringify(news))
}
break;
default:
fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
if(e){
res.writeHead(404, 'not found')
res.end('<h1>404 Not Found</h1>')
}else{
res.end(data)
}
})
}
}).listen(8080)
index.html
<!DOCTYPE html>
<html>
<body>
<div class="container">
<ul class="news">
</ul>
<button class="show">show news</button>
</div>
<script>
$('.show').addEventListener('click', function(){
var script = document.createElement('script');
script.src = 'http://127.0.0.1:8080/getNews?callback=appendHtml'; //创建一个script,用src请求的跨域服务器, 如果有,则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);
$('.news').innerHTML = html;
}
function $(id){
return document.querySelector(id);
}
</script>
</html>
跨域实现方法二: CORS
是跨域资源分享（Cross-Origin Resource Sharing）的缩写.
流程如下:
- 网页上发送XHLHttpRequest的时候, 浏览器判断 这个 发送的请求 是否同源.
- 发现不同源 --> 给这个请求加上 一个请求头: Origin, 并做一些处理.
- 不同源的服务器收到请求,进行处理后,在发送数据的时候,会 加入一个 响应头: Access-Control-Allow-Origin (进入浏览器的凭证)
- 最后，数据来到浏览器门口，浏览器看这段数据是否包含自己处理过的Ｏrigin值.
- 如果 有, 请进; 没有,一边凉快去.
CORS演示案例:
server.js
var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')
http.createServer(function(req, res){
var pathObj = url.parse(req.url, true)
switch (pathObj.pathname) {
case '/getNews':
var news = [
"第11日前瞻：中国冲击4金 博尔特再战200米羽球",
"正直播柴飚/洪炜出战 男双力争会师决赛",
"女排将死磕巴西！郎平安排男陪练模仿对方核心"
]
res.setHeader('Access-Control-Allow-Origin','http://localhost:8080') // 核心代码 给请求头添加验证码:Access-Control-Allow-Origin
//res.setHeader('Access-Control-Allow-Origin','*')
res.end(JSON.stringify(news))
break;
default:
fs.readFile(path.join(__dirname, pathObj.pathname), function(e, data){
if(e){
res.writeHead(404, 'not found')
res.end('<h1>404 Not Found</h1>')
}else{
res.end(data)
}
})
}
}).listen(8080)
index.html
<!DOCTYPE html>
<html>
<body>
<div class="container">
<ul class="news">
</ul>
<button class="show">show news</button>
</div>
<script>
$('.show').addEventListener('click', function(){
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://127.0.0.1:8080/getNews', true)
xhr.send()
xhr.onload = function(){
appendHtml(JSON.parse(xhr.responseText))
}
})
function appendHtml(news){
var html = ''
for( var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>'
}
$('.news').innerHTML = html
}
function $(selector){
return document.querySelector(selector)
}
</script>
</html>
跨域实现方法三: postMessage
postMessage 原理:
- postMessage 是 HTML5 中新增方法，可实现跨域通信；
- postMessage 并不是向服务器读写资源，只是向外发送消息而已；可以把它当做使用手机发送短信消息，仅此而已。
- 也就是：A 页面向 B 页面发送了一条消息，B 页面会接受到该消息，如果 B 页面需要该消息，则监听 message；否则无需关心该消息
- 发送方：为目标元素添加事件处理程序，监听事件类型
- 接收方：为 window 添加事件处理程序，事件类型为 messag
案例:
1）页面的说明：
A 页面的域为 a.com；A 页面拥有两个元素 input 输入框、ifream，ifream引入 B 页面资源；
B 页面的域为 b.com；B 页面拥有一个元素 input 输入框
2）实现的功能：在任意 input 输入框中输入值时，另外一个 input 输入框同步显示输入的值
A 页面代码 a.com
var input = document.querySelector('.main input');
input.addEventListener('input', function () {
console.log('window:' + this.value);
window.frames[0].postMessage(this.value, '*');
});
window.addEventListener('message', function (e) {
console.log('window:'+ e.data);
input.value = e.data;
})
B 页面代码 b.com
var input = document.querySelector('input');
input.addEventListener('input', function () {
console.log('iframe:'+ this.value);
window.parent.postMessage(this.value, 'http://a.com:8080');
});
window.addEventListener('message', function (e) {
console.log('ifream:'+ e.data);
input.value = e.data;
})
postMessage 的注意点
- 这样就解除了降域的限制，可以将 postMessage 应用到各个不同的域之间，
实现跨域访问。该方式比较安全，因为对方并不能直接操控我方资源，
仅仅是发了一条消息，相当于指令，而最终操作权限仍在自己手中- 虽然解决了降域的限制，但是：postMessage 是 window 的一个方法，
话句话说：它的弱点是只能向 window 窗口发送消息。
所以使用时至少要有一个 window 才行，postMessage 不可以向其他域名发送消息
