跨域

作者: 饥人谷_流云 | 来源:发表于2017-07-27 11:37 被阅读0次

JSONP

利用 <script>标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。
当需要通讯时，本站脚本创建一个元素，地址指向第三方的API网址，
如：<script src="http://www.example.net/api?param1=1&param2=2"></script>
并提供一个回调函数来接收数据（函数名可约定，或通过地址参数传递）。第三方产生的响应为json数据的包装（故称之为jsonp，即json padding）
如：callback({"name":"hax","gender":"Male"}) 这样浏览器会调用callback函数，并传递解析后json对象作为参数。
优点：简单，老式浏览器全部支持，服务器改造小。不需要XMLHttpRequest或ActiveX的支持。
缺点：只支持GET请求。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>news</title>
    <style>
        .container{
            width: 900px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="container">
    <ul class="news">
        <li>第11日前瞻：中国冲击4金 博尔特再战</li>
        <li>男双力争会师决赛 </li>
        <li>女排将死磕巴西！</li>
    </ul>
    <button class="change">换一组</button>
</div>

<!--<script src="http://localhost:8080/a.js"></script>-->
<script>
    $('.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);
    });
  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>

后端

app.get('/getNews', function (req, res) {

    var news = [
        "1.三国",
        "2.水浒",
        "3.红楼",
        "4.西游",
        "5.聊斋",
        "6.山海",
        "7.道德",
        "8.三字"
    ]
    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;
    if (cb) {
        res.send(cb + '(' + JSON.stringify(data) + ')');
    } else {
        res.send(data);
    }

})

CORS

CORS即Cross Origin Resource Sharing（跨来源资源共享），通俗说就是我们所熟知的跨域请求。众所周知，在以前，跨域可以采用代理、JSONP等方式，而在Modern浏览器面前，这些终将成为过去式，因为有了CORS。

CORS在最初接触的时候只大概了解到，通过服务器端设置Access-Control-Allow-Origin响应头，即可使指定来源像访问同源接口一样访问跨域接口，最近在使用CORS的时候，由于需要传输自定义Header信息，发现原来CORS的规范定义远不止这些。

CORS可以分成简单请求和复杂请求
一个简单的请求大致如下：

HTTP方法是下列之一:
HEAD
GET
POST

HTTP头包含:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type，但仅能是下列之一
application/x-www-form-urlencoded
multipart/form-data
text/plain
任何一个不满足上述要求的请求，即被认为是复杂请求。一个复杂请求不仅有包含通信内容的请求，同时也包含预请求（preflight request）。

简单请求的发送从代码上来看和普通的XHR没太大区别，但是HTTP头当中要求总是包含一个域（Origin）的信息。该域包含协议名、地址以及一个可选的端口。不过这一项实际上由浏览器代为发送，并不是开发者代码可以触及到的。

简单请求的部分响应头及解释如下：

Access-Control-Allow-Origin（必含）- 不可省略，否则请求按失败处理。该项控制数据的可见范围，如果希望数据对任何人都可见，可以填写"*"。

Access-Control-Allow-Credentials（可选） – 该项标志着请求当中是否包含cookies信息，只有一个可选值：true（必为小写）。如果不包含cookies，请略去该项，而不是填写false。这一项与XmlHttpRequest2对象当中的withCredentials属性应保持一致，即withCredentials为true时该项也为true；withCredentials为false时，省略该项不写。反之则导致请求失败。

Access-Control-Expose-Headers（可选） – 该项确定XmlHttpRequest2对象当中getResponseHeader()方法所能获得的额外信息。通常情况下，getResponseHeader()方法只能获得如下的信息：
Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
当你需要访问额外的信息时，就需要在这一项当中填写并以逗号进行分隔
如果仅仅是简单请求，那么即便不用CORS也没有什么大不了，但CORS的复杂请求就令CORS显得更加有用了。简单来说，任何不满足上述简单请求要求的请求，都属于复杂请求。比如说你需要发送PUT、DELETE等HTTP动作，或者发送Content-Type: application/json的内容。

复杂请求表面上看起来和简单请求使用上差不多，但实际上浏览器发送了不止一个请求。其中最先发送的是一种"预请求"，此时作为服务端，也需要返回"预回应"作为响应。预请求实际上是对服务端的一种权限请求，只有当预请求成功返回，实际请求才开始执行。

预请求以OPTIONS形式发送，当中同样包含域，并且还包含了两项CORS特有的内容：

Access-Control-Request-Method – 该项内容是实际请求的种类，可以是GET、POST之类的简单请求，也可以是PUT、DELETE等等。
Access-Control-Request-Headers – 该项是一个以逗号分隔的列表，当中是复杂请求所使用的头部。
显而易见，这个预请求实际上就是在为之后的实际请求发送一个权限请求，在预回应返回的内容当中，服务端应当对这两项进行回复，以让浏览器 ## 标题头
确定请求是否能够成功完成。

复杂请求的部分响应头及解释如下：

Access-Control-Allow-Origin（必含） – 和简单请求一样的，必须包含一个域。

Access-Control-Allow-Methods（必含） – 这是对预请求当中Access-Control-Request-Method的回复，这一回复将是一个以逗号分隔的列表。尽管客户端或许只请求某一方法，但服务端仍然可以返回所有允许的方法，以便客户端将其缓存。

Access-Control-Allow-Headers（当预请求中包含Access-Control-Request-Headers时必须包含） – 这是对预请求当中Access-Control-Request-Headers的回复，和上面一样是以逗号分隔的列表，可以返回所有支持的头部。这里在实际使用中有遇到，所有支持的头部一时可能不能完全写出来，而又不想在这一层做过多的判断，没关系，事实上通过request的header可以直接取到Access-Control-Request-Headers，直接把对应的value设置到Access-Control-Allow-Headers即可。

Access-Control-Allow-Credentials（可选） – 和简单请求当中作用相同。

Access-Control-Max-Age（可选） – 以秒为单位的缓存时间。预请求的的发送并非免费午餐，允许时应当尽可能缓存。
一旦预回应如期而至，所请求的权限也都已满足，则实际请求开始发送。

通caniuse.com得知，目前大部分Modern浏览器已经支持完整的CORS，但IE直到IE11才完美支持，所以对于PC网站，还是建议采用其他解决方案，如果仅仅是移动端网站，大可放心使用。
代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>news</title>
    <style>
        .container{
            width: 900px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="container">
    <ul class="news">
        <li>第11日前瞻：中国冲击4金 博尔特再战</li>
        <li>男双力争会师决赛 </li>
        <li>女排将死磕巴西！</li>
    </ul>
    <button class="change">换一组</button>
</div>

<script>

    $('.change').addEventListener('click', function(){

        var xhr = new XMLHttpRequest();
        xhr.open('get', 'http://a.jirengu: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 $(id){
        return document.querySelector(id);
    }
</script>
</body>

后端

</html>app.get('/getNews', function (req, res) {

    var news = [
        "1.三国",
        "2.水浒",
        "3.红楼",
        "4.西游",
        "5.聊斋",
        "6.山海",
        "7.道德",
        "8.三字"
    ]
    var data = [];
    for (var i = 0; i < 3; i++) {
        var index = parseInt(Math.random() * news.length);
        data.push(news[index]);
        news.splice(index, 1);
    }
    //res.header("Access-Control-Allow-Origin", "http://c.jrg.com:8080"); 
    res.header("Access-Control-Allow-Origin", "*");
    res.send(data);

})

降域修改document.domain

A页面

<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>测试</h1>
    <div class="main">
        <input type="text" placeholder="http://a.jrg.com:8080/a.html">
    </div>

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

</div>


<script>
    //URL: http://a.jrg.com:8080/a.html

    document.querySelector('.main input').addEventListener('input', function(){
        console.log(this.value);
        window.frames[0].document.querySelector('input').value = this.value;
    })

    document.domain = "jrg.com";
</script>
</html>

B页面

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

    <input id="input" type="text"  placeholder="http://b.jrg.com:8080/b.html">
<script>

// URL: http://b.jrg.com:8080/b.html

document.querySelector('#input').addEventListener('input', function(){
    window.parent.document.querySelector('input').value = this.value;
})

document.domain = 'jrg.com';

</script>
</html>

window.postMessage方法

页面A

<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.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>
<style>
    html,body{
        margin: 0;
    }
    input{
        margin: 20px;
        width: 200px;
    }
</style>

    <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, '*');
})

window.addEventListener('message',function(e) {
        $('#input').value = e.data
    console.log(e.data);
});

function $(id){
    return document.querySelector(id);
}    

</script>
</html>

跨域

JSONP

CORS

降域修改document.domain

window.postMessage方法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

跨域

JSONP

CORS

降域 修改document.domain

window.postMessage方法

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

降域修改document.domain