第一种JSONP方式
举列说明，比如我想向一个天气接口获取数据，但是我当前的域名和天气这个接口的域名不一样，它想把自己的浏览器接口提供给别人用，我也想用它的接口，但是浏览器会它给阻止掉，那么如何绕过浏览器，去实现这个功能呢。
<script src="http://weather.com.cn?city=hangzhou"></script>
script 标签里src，不管内容是什么，无外乎都是向这个内容，发送请求，把数据拿过来之后作为js去执行。但是
{
city: 'hangzhou'，
weather: {...}
}
这样js肯定是会报错的，即使不报错，也没有办法将它展示页面上。因此接口里面必须要有
showWeather({
city: 'hangzhou',
weather: {}
})
以及写js的时候里面声明了函数
function showWeather(json) {
xxxx
}
这样两者的配合，才可以将实际所需要的展示在页面上。
因此src需要修改成 <script src="http://weather.com.cn?city=hangzhou&callback=showWeather"></script>
因此我们可以这样去做，伪代码如下:
script.src = 'http://127.0.01/getNews?callback=appendHtml';
document.head.appendChild(script);
document.head.removeChild(script);
function appendHtml(news) {
}
服务端 router.js 需要添加
app.get('/getNews', function(req, res) {
...
...
...
...
var cb = req.query.callback;
if(cb) { // 如果callback存在
res.send(cb +'(' + JSON.stringify(data) + ')');
} else {
res.send(data);
}
// appendHtml(['1xxx', '2xxx'])
}
第二种方式cors
CORS 全称是跨域资源共享（Cross-Origin Resource Sharing）,是一种ajax跨域请求资源的方式，支持现代浏览器，IE支持10以上。实现方式很简单，当你使用XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头: Origin, 后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头: Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据，所以CORS的表象是让你觉得它与同源的ajax请求没啥区别，代码完全一样。html里面script里面就是普通的ajax请求，而在服务端加了一条
res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080");
意思就是这个url发送的ajax我是给你数据的。
res.header("Access-Control-Allow-Origin", "*");
不管域名是什么，浏览器都放行。
第三种方式降域（iframe）
那是因为你当前的域名是a.jrg.com而你iframe里面的域名是b.jrg.com。
这个时候，你在当前页面操作iframe里面的东西，是有问题的，会被阻止掉。这是浏览器的另一种同源策略，防止你在不同源下操作iframe里面的内容。
针对这种方式，降域。
名下有两个网站，对应的祖域名是一样的，而二级域名不一样，这两个网站实现iframe嵌套，当有需求的时候可以采用降域的方法。
a1.html里面的内容
...
<iframe src="http://b.jrg.com:8080/b1.html" frameborder="0"></iframe>
<script>
document.domain = 'jrg.com';
</script>
// b.html 里面的内容
<script>
document.domain = 'jrg.com';
</script>
第四种跨域方式postMessage
我不可以操作你的页面，但是我可以给你这个页面发送一些消息。
假设iframe里面的域名认可这个消息，那么iframe就可以接受这个消息。
同时iframe也可以向外面发送一些消息，如果你也认可它，那你也可以拿这个消息去处理。那这样就实现了二者的一个交互。
对于不同域下，我可以向他发送一些数据，如果对方接受了这个数据，那么就可以去用它。如果对方没有接受它，那么就没有任何的作用。
举列说明
// a.html
<div class="ct">
<h1>使用postMessage实现跨域</h1>
<div class="main">
<input type="text" placeholder="http://a.jrg.com:8080/a.html">
</div>
<iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>
</div>
<script>
//URL: http://a.jrg.com:8080/a.html
$('.main input').addEventListener('input', function(){
console.log(this.value);
window.frames[0].postMessage(this.value,'*');
})
window.addEventListener('message',function(e) {
$('.main input').value = e.data
console.log(e.data);
});
function $(id){
return document.querySelector(id);
}
</script>
// b.html
<input id="input" type="text" placeholder="http://b.jrg.com:8080/b.html">
<script>
// URL: http://b.jrg.com:8080/b.html
$('#input').addEventListener('input', function(){
window.parent.postMessage(this.value, '*');
// 不管post给谁都可以。
})
window.addEventListener('message',function(e) {
$('#input').value = e.data
console.log(e.data);
});
function $(id){
return document.querySelector(id);
}
</script>
网友评论