本文介绍跨域的八种方法:
JSONP
只要说到跨域，就必须聊到 JSONP，JSONP全称为：JSON with Padding，可用于解决主流浏览器的跨域数据访问的问题。
Web 页面上调用 js 文件不受浏览器同源策略的影响，所以通过 Script 便签可以进行跨域的请求：
html中script标签可以引入其他域下的js，不受同源策略的限制比如引入线上的jquery库。利用这个特性，可实现跨域访问接口。需要后端支持
script标签：在页面中动态插入script，script标签的src属性就是后端api接口的地址；这样加载script标签脚本直接调用本地方法，而script标签会立即执行脚本，示例：getNews?callback=appendHtml
后端：后端需要解析callback参数值，并将该值和返回数据拼接。示例：res.send(req.query.callback + '(' + JSON.stringify(data) + ')')
后端页面：
app.get('/getNews',function(req,res){
var news = [
'123',
'456',
'789',
'321',
'654',
'987',
'753',
'159',
'852'
]
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
var show = cb + '(' + JSON.stringify(data) + ')'
console.log(show)
if(cb){
res.send(show)
}else{
res.send(data)
}
})
前端页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="container">
<ul class="news">
<li>233</li>
<li>323</li>
<li>332</li>
</ul>
<button class="change">换一组</button>
</div>
<script>
let $ = (className) => document.querySelector(className)
$('.change').addEventListener('click',function(){
var script = document.createElement('script')
script.src = 'http://localhost:8080/getNews?callback=appendHtml'
document.head.appendChild(script)
document.head.removeChild(script)
})
// appendHtml(["321","987","159"])
function appendHtml(news){
var html = ''
for(var i=0;i<news.length;i++){
html += '<li>' + news[i] + '</li>'
}
console.log(html)
$('.news').innerHTML = html
}
</script>
</body>
</html>
优点：
- 它不像XMLHttpRequest 对象实现 Ajax 请求那样受到同源策略的限制
- 兼容性很好，在古老的浏览器也能很好的运行
- 不需要 XMLHttpRequest 或 ActiveX 的支持；并且在请求完毕后可以通过调用 callback 的方式回传结果。
缺点：
- 它支持 GET 请求而不支持 POST 等其它类行的 HTTP 请求。
- 它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面或 iframe 之间进行数据通信的问题
CORS
CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 ajax 只能同源使用的限制。
CORS 需要浏览器和服务器同时支持才可以生效，对于开发者来说，CORS 通信与同源的 ajax 通信没有差别，代码完全一样。浏览器一旦发现 ajax 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。
首先前端先创建一个 index.html 页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CORS</title>
</head>
<body>
<script>
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:3000', true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
alert(xhr.responseText);
}
}
xhr.send(null);
</script>
</body>
</html>
这似乎跟一次正常的异步 ajax 请求没有什么区别，关键是在服务端收到请求后的处理：
require('http').createServer((req, res) => {
res.writeHead(200, {
'Access-Control-Allow-Origin': 'http://localhost:8080'
});
res.end('这是你要的数据：1111');
}).listen(3000, '127.0.0.1');
console.log('启动服务，监听 127.0.0.1:3000');
关键是在于设置相应头中的 Access-Control-Allow-Origin，该值要与请求头中 Origin 一致才能生效，否则将跨域失败
成功的关键在于 Access-Control-Allow-Origin 是否包含请求页面的域名，如果不包含的话，浏览器将认为这是一次失败的异步请求，将会调用 xhr.onerror 中的函数
CORS 的优缺点：
- 使用简单方便，更为安全
- 支持 POST 请求方式
- CORS 是一种新型的跨域问题的解决方案，存在兼容问题，仅支持 IE 10 以上
Server Proxy
服务器代理，顾名思义，当你需要有跨域的请求操作时发送请求给后端，让后端帮你代为请求，然后最后将获取的结果发送给你。
假设有这样的一个场景，你的页面需要获取 CNode：Node.js专业中文社区 论坛上一些数据，如通过 https://cnodejs.org/api/v1/topics，当时因为不同域，所以你可以将请求后端，让其对该请求代为转发。
const url = require('url');
const http = require('http');
const https = require('https');
const server = http.createServer((req, res) => {
const path = url.parse(req.url).path.slice(1);
if(path === 'topics') {
https.get('https://cnodejs.org/api/v1/topics', (resp) => {
let data = "";
resp.on('data', chunk => {
data += chunk;
});
resp.on('end', () => {
res.writeHead(200, {
'Content-Type': 'application/json; charset=utf-8'
});
res.end(data);
});
})
}
}).listen(3000, '127.0.0.1');
console.log('启动服务，监听 127.0.0.1:3000');
document.domain(降域)
document.domain 的作用是用来获取/设置当前文档的原始域部分，例如：
// 对于文档 www.example.xxx/good.html
document.domain="www.example.xxx"
// 对于URI http://developer.mozilla.org/en/docs/DOM
document.domain="developer.mozilla.org"
对于主域相同而子域不同的情况下，可以通过设置document.domain 的办法来解决，具体做法是可以在http://a.jirengu.com:8080/a.html和http://b.jirengu.com:8080/b.html之中设置document.domain = 'jirengu.com'
a.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
iframe{
width: 400px;
height: 300px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="ct">
<h1>使用降域实现跨域</h1>
<div class="main">
<input type="text" placeholder="http://a.jirengu.com:8080/a.html">
</div>
<iframe src="http://b.jirengu.com:8080/b.html"></iframe>
</div>
<script>
// http://a.jirengu.com:8080/a.html
document.querySelector('.main input').addEventListener('click',function(){
console.log(this.value)
window.frames[0].document.querySelector('input').value = this.value
})
document.domain = 'jirengu.com'
</script>
</body>
</html>
b.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
margin: 0;
padding: 0;
}
input{
margin: 20px;
width: 200px;
}
</style>
</head>
<body>
<input id="input" type="text" placeholder="http://b.jirengu.com:8080/b.html">
<script>
document.querySelector('#input').addEventListener('click',function(){
window.parent.document.querySelector('input').value = this.value
})
document.domain = 'jirengu.com' //降域
</script>
</body>
</html>
document.domain 的优点在于解决了主语相同的跨域请求，但是其缺点也是很明显的：比如一个站点受到攻击后，另一个站点会因此引起安全漏洞；若一个页面中引入多个 iframe，想要操作所有的 iframe 则需要设置相同的 domain。
window.postMessage
postMessage 是 HTML5 新增加的一项功能，跨文档消息传输(Cross Document Messaging)，目前：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 都支持这项功能，使用起来也特别简单。
首先创建 a.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a.html</title>
</head>
<body>
<iframe src="http://localhost:8081/b.html" style='display: none;'></iframe>
<script>
window.onload = function() {
let targetOrigin = 'http://localhost:8081';
window.frames[0].postMessage('我要给你发消息了!', targetOrigin);
}
window.addEventListener('message', function(e) {
console.log('a.html 接收到的消息:', e.data);
});
</script>
</body>
</html>
创建一个 iframe，使用 iframe 的一个方法 postMessage 可以向http://localhost:8081/b.html 发送消息，然后监听 message，可以获得其他文档发来的消息。
同样的 b.html 文件：
<script>
window.addEventListener('message', function(e) {
if(e.source != window.parent) {
return;
}
let data = e.data;
console.log('b.html 接收到的消息:', data);
parent.postMessage('我已经接收到消息了!', e.origin);
});
</script>
location.hash
location.hash 是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。例如：
// 对于页面 http://example.com:1234/test.htm#part2
location.hash = "#part2"
同时，由于我们知道改变 hash 并不会导致页面刷新，所以可以利用 hash 在不同源间传递数据。
假设 github.io 域名下 a.html 和 shaonian.eu 域名下 b.html 存在跨域请求，那么利用 location.hash 的一个解决方案如下：
- a.html 页面中创建一个隐藏的 iframe， src 指向 b.html，其中 src 中可以通过 hash 传入参数给 b.html
- b.html 页面在处理完传入的 hash 后通过修改 a.html 的 hash 值达到将数据传送给 a.html 的目的
- a.html 页面添加一个定时器，每隔一定时间判断自身的 location.hash 是否变化，以此响应处理
以上步骤中需要注意第二点：如何在 iframe 页面中修改 父亲页面的 hash 值。由于在 IE 和 Chrome 下，两个不同域的页面是不允许 parent.location.hash 这样赋值的，所以对于这种情况，我们需要在父亲页面域名下添加另一个页面来实现跨域请求，具体如下：
- 假设 a.html 中 iframe 引入了 b.html, 数据需要在这两个页面之间传递，且 c.html 是一个与 a.html 同源的页面
- a.html 通过 iframe 将数据通过 hash 传给 b.html
- b.html 通过 iframe 将数据通过 hash 传给 c.html
- c.html 通过 parent.parent.location.hash 设置 a.html 的 hash 达到传递数据的目的
location.hash 方法的优点在于可以解决域名完全不同的跨域请求，并且可以实现双向通讯；而缺点则包括以下几点：
- 利用这种方法传递的数据量受到 url 大小的限制，传递数据类型有限
- 由于数据直接暴露在 url 中则存在安全问题
- 若浏览器不支持 onhashchange 事件，则需要通过轮训来获知 url 的变化
- 有些浏览器会在 hash 变化时产生历史记录，因此可能影响用户体验
window.name
window.name的值不是一个普通的全局变量，而是当前窗口的名字，这里要注意的是每个 iframe 都有包裹它的 window，而这个 window 是top window 的子窗口，而它自然也有 window.name 的属性，window.name 属性的神奇之处在于 name 值在不同的页面（甚至不同域名）加载后依旧存在（如果没修改则值不会变化），并且可以支持非常长的 name 值（2MB）。
举个简单的例子：你在某个页面的控制台输入：
window.name = "Hello World";window.location = "http://www.baidu.com";
页面跳转到了百度首页，但是 window.name 却被保存了下来，还是 Hello World，跨域解决方案似乎可以呼之欲出了：
首先创建 a.html 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a.html</title>
</head>
<body>
<script>
let data = '';
const ifr = document.createElement('iframe');
ifr.src = "http://localhost:8081/b.html";
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function() {
ifr.onload = function() {
data = ifr.contentWindow.name;
console.log('收到数据:', data);
}
ifr.src = "http://localhost:8080/c.html";
}
</script>
</body>
</html>
之后再创建 b.html 文件：
<script> window.name = "你想要的数据!";</script>
http://localhost:8080/a.html在请求远端服务器 http://localhost:8081/b.html的数据，我们可以在该页面下新建一个 iframe，该 iframe 的 src 属性指向服务器地址，(利用 iframe 标签的跨域能力)，服务器文件 b.html 设置好 window.name 的值。
但是由于 a.html 页面和该页面 iframe 的 src 如果不同源的话，则无法操作 iframe 里的任何东西，所以就取不到 iframe 的 name 值，所以我们需要在 b.html 加载完后重新换个 src 去指向一个同源的 html 文件，或者设置成 'about:blank;' 都行，这时候我只要在 a.html 相同目录下新建一个 c.html 的空页面即可。如果不重新指向 src 的话直接获取的 window.name 的话会报错。
WebSocket
WebSocket 协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。
参考链接：
