跨域

定义

跨域是指从一个域名的网页去请求另一个域名的资源。比如从http://www.baidu.com/ 页面去请求 http://www.google.com 的资源。跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域。

目前学到的四种跨域的解决方式

JSONP

jsonp是一种跨域通信的手段，它的原理其实很简单：
1.首先是利用script标签的src属性来实现跨域。
2.通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。
3.由于使用script标签的src属性，因此只支持get方法。
前端代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>news</title>
    <style type="text/css">
        .container{
            width: 900px;
            maigin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="news">
        </ul>
        <button class="show">show news</button>
    </div>

    <script type="text/javascript">
        $('.show').addEventListener('click',function(){
            var script = document.createElement('script');
            script.src = 'http://b.ji.com:8080/getNews?callback=appendHtml';
            document.body.appendChild(script);
            document.body.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>
</body>
</html>

后端代码：

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){
                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)

优点
1.兼容性很好，在古老的浏览器也能很好的运行
2.不需要 XMLHttpRequest 或 ActiveX 的支持；并且在请求完毕后可以通过调用 callback 的方式回传结果。
3.不受同源策略的限制
缺点
1.只支持 GET 请求而不支持 POST 等其它类型的 HTTP 请求。
2.只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
3.容易遭受XSS攻击，因为我们拿到的是对方接口的数据作为js执行，如果得到的是一个很危险js，获取了用户信息和cookies，这时执行了js就会出现安全问题。

CORS

CORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 ajax 只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

CORS 分为简单请求和非简单请求，本文在这里实现简单请求。（非简单请求请参考）
前端代码：

<!DOCTYPE html>
<html>
<head>
    <title>news</title>
    <style type="text/css">
        .container{
            width: 900px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul class="news">
        </ul>
        <button class="show">show news</button>
    </div>

    <script type="text/javascript">
        $('.show').addEventListener('click',function(){
            var xhr = new XMLHttpRequest();
            xhr.open('GET','http://a.ji.com:8080/getNews',true);
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && xhr.status === 200){
                    appendHtml(JSON.parse(xhr.responseText))
                }
            }
        })
        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 $(selector){
            return document.querySelector(selector)
        }
    </script>
</body>
</html>

后端代码：

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://b.ji.com:8080')
            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)

Access-Control-Allow-Origin字段是必须的，它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

降域

当这两个域名都属于同一个基础域名，而且所用的协议，端口都一致的时候，可以使用降域来实现跨域；当以上所述成立的时候，可以通过将domain改成一样的来实现。

a.html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>降域a</title>
    <style type="text/css">
        .ct{
            width: 910px;
            margin: auto;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
        .main{
            float: left;
            width: 450px;
            height: 300px;
            border: 1px solid #ccc;
        }
        .main input{
            margin: 20px;
            width: 200px;
        }
        .iframe{
            float: right;
        }
        iframe{
            width: 450px;
            height: 300px;
            border: 1px dashed #ccc;
        }
    </style>
</head>
<body>
    <div class="ct clearfix">
        <h1>使用降域实现跨域</h1>
        <div class="main">
            <input type="text" placeholder="http://a.ji.com:8080/a.html">
        </div>

        <iframe src="http://b.ji.com:8080/b.html" frameborder="0"></iframe>
    </div>

    <script type="text/javascript">
        document.querySelector('.main input').addEventListener('input',function(){
            console.log(this.value);
            window.frame[0].document.querySelector('input').value = this.value;
        })
        document.domain ='ji.com'
    </script>
</body>
</html>

b.html代码:

<!DOCTYPE html>
<html>
<head>
    <title>降域b</title>
    <style type="text/css">
        html,body{
            margin:0;
        }
        input{
            margin: 20px;
            width: 200px;
        }
    </style>
</head>
<body>
    <input type="text" id="input" placeholder="http://b.ji.com:8080/b.html">

    <script type="text/javascript">
        document.querySelector('#input').addEventListener('input',function(){
            window.parent.document.querySelector('input').value = this.value;
        })
        document.domain = 'ji.com'
    </script>
</body>
</html>

启动本地服务器，打开a.ji.com:8080/a.html ，window.frames[0].document.body可以取到body中的元素，
在非同源情况下，因为同源策略的限制，无法取到相应元素，会报错。

postMessage

HTML5引入了一个全新的API：跨文档通信 API（Cross-document messaging）。
这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。

a.html代码：

<html>
<style>
    .ct{
        width: 910px;
        margin: auto;
    }
    .main{
        float: left;
        width: 450px;
        height: 300px;
        border: 1px solid #ccc;
    }
    .main input{
        margin: 20px;
        width: 200px;
    }
    .iframe{
        float: right;
    }
    iframe{
        width: 450px;
        height: 300px;
        border: 1px dashed #ccc;
    }
</style>

<div class="ct">
    <h1>使用postMessage实现跨域</h1>
    <div class="main">
        <input type="text" placeholder="http://a.ji.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>
</html>

b.html代码：

<html>
<style>
    html,body{
        margin: 0;
    }
    input{
        margin: 20px;
        width: 200px;
    }
</style>

    <input id="input" type="text"  placeholder="http://b.ji.com:8080/b.html">
<script>
// URL: http://b.jrg.com:8080/b.html
 
$('#input').addEventListener('input', function(){
    window.parent.postMessage(this.value, '*');
})
window.addEventListener('message',function(e) {
        $('#input').value = e.data
    console.log(e.data);
});
function $(id){
    return document.querySelector(id);
}   
</script>
</html>

postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即“协议 + 域名 + 端口”。也可以设为*，表示不限制域名，向所有窗口发送。
github

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 215,634评论 6赞 497
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,951评论 3赞 391
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 161,427评论 0赞 351
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,770评论 1赞 290
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,835评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,799评论 1赞 294
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,768评论 3赞 416
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,544评论 0赞 271
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,979评论 1赞 308
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,271评论 2赞 331
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,427评论 1赞 345
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,121评论 5赞 340
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,756评论 3赞 324
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,375评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,579评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,410评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,315评论 2赞 352

跨域

定义

目前学到的四种跨域的解决方式

JSONP

CORS

降域

postMessage

推荐阅读更多精彩内容