跨域

2018-01-09 本文已影响0人饥人谷_adoreu

定义

跨域是指从一个域名的网页去请求另一个域名的资源。比如从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

跨域

定义

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

JSONP

CORS

降域

postMessage

猜你喜欢

热点阅读