方法一：JSONP
原理
JSONP（JSON with padding），padding有填补的意思，所以JSONP也就是往JSON上加一些东西。在HTML 中 script 标签可以加载其他域下的js，比如我们经常引入一个其他域下线上cdn的jQuery。那么我们可以利用这个特性来向其他域请求数据。
对于HTML中的script标签，src中请求的数据返回后会被当做Javascript代码来运行，所以当后台返回数据的时候，不能直接返回数组或者字符串之类的，应该对数据进行“包裹”，也就是JSONP中的P代表的padding，加点东西。下面请看例子。
举例
第一步
我们现在向后台的约定了一个获取天气的接口getWeather，然后在script标签中写一个这样的请求：
<script src="a.com/getWeather?callback=showData"></script>
第二步
后台收到/getWeather这个路由后，应该是直接向我返回一个JSON格式的数据，其中包含天气，比如这个数据，{ "beijing" : "sunny" }。但对于script标签，返回的数据是要作为Javascript代码执行的，上面返回的数据应该进行“包裹”，例如变成这样showData( { "beijing" : "sunny" } )，服务器端写法如下：
var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');
var server = http.createServer(function(req,res){
var pathObj = url.parse(req.url,true);
//处理getWeather请求
if(pathObj.pathname === '/getWeather'){
var callback = pathObj.query.callback
console.log(callback)
res.write(`${callback}({"beijing":"sunny"})`)
res.end()
}else{
res.end()
}
})
server.listen(8080);
结果
方法二：CORS
原理
CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，Origin对应的值是当前网站的域名。后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin； 浏览器判断该响应头中是否包含 Origin 的值（也就是Access-Control-Allow-Origin的值和Origin的值对应），如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含，浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。
举例
- HTML代码
//打开此页面使用的地址是a.com:8080
<!DOCTYPE html>
<html>
<head>
<title>a.html</title>
<meta charset="utf-8">
</head>
<body>
<button id="click">发送请求</button>
<script type="text/javascript">
click.onclick = function(){
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://b.com:8080/getWeather')
xhr.onload = function(){
console.log(xhr.responseText)
}
xhr.send()
}
</script>
</body>
</html>
- 服务端代码
var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');
var server = http.createServer(function(req,res){
var pathObj = url.parse(req.url,true);
//处理getWeather请求
if(pathObj.pathname === '/getWeather'){
var weather = {"beijing":"sunny"}
res.setHeader('Access-Control-Allow-Origin', 'http://a.com:8080')
res.write(JSON.stringify(weather))
res.end()
}else{
res.end()
}
})
server.listen(8080);
方法三：降域
原理
主要用于页面上iframe跨域的操作。降域就是通过在两个页面使用 document.domain方法，将两个页面的域名统一，由此来实现跨域。不过这要求两个页面的域名有公共的部分。
举例
- a.html
<!DOCTYPE html>
<html>
<head>
<title>a.html</title>
<meta charset="utf-8">
<style type="text/css">
.windowB {
height: 250px;
width: 500px;
margin: 10px 10px;
border: 1px #ccc solid;
}
</style>
</head>
<body>
<h1>this is a.html</h1>
<iframe class="windowB" src="http://b.common.com:8080/b.html"></iframe>
</body>
</html>
- b.html
<!DOCTYPE html>
<html>
<head>
<title>b.html</title>
</head>
<body>
<h1>this is b.html</h1>
<script type="text/javascript">
document.domain = 'common.com'
</script>
</body>
</html>
效果
方法四：postMessage
原理
当前页面要和iframe进行数据交互的时候，可以选中需要交互的iframe，然后利用postMessage这个方法向它发送消息，然后在iframe页面上监听message这个事件，对发来的信息做处理，这样就可以实现数据的交互。
举例
- a.html
<!DOCTYPE html>
<html>
<head>
<title>a.html</title>
<meta charset="utf-8">
<style type="text/css">
.windowB {
height: 250px;
width: 500px;
margin: 10px 10px;
border: 1px #ccc solid;
}
</style>
</head>
<body>
<h1>this is a.html</h1>
<button id="click">发送请求</button>
<input type="text" name="data" placeholder="请输入文字">
<script type="text/javascript">
function $(e){
var element = document.querySelector(e)
return element
}
//选中input，绑定事件，当输入信息时，在iframe中展示，*表示在任何域下都可以接受
$('input').addEventListener('input', function(){
window.frames[0].postMessage(this.value,'*')
})
</script>
</body>
</html>
- b.html
<!DOCTYPE html>
<html>
<head>
<title>b.html</title>
<meta charset="utf-8">
</head>
<body>
<h1>this is b.html</h1>
<input type="text" name="data2" placeholder="显示数据">
<script type="text/javascript">
function $(e){
var element = document.querySelector(e)
return element
}
window.addEventListener('message',function(e){
$('input').value = e.data
})
</script>
</body>
</html>
