跨域的4种实现方式

1.使用JSONP实现跨域

HTML代码

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>使用JSONP实现跨域</title>
  </head>
  <body>
    <div class="container">
        <ul class="news"></ul>
        <button class="show">show news</button>
    </div>
  </body>
  <script type="text/javascript">
     $('.show').addEventListener('click',function(){
        var script = document.createElement('script');
        script.src='http://127.0.0.1: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>
  </html>

server.js

  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);
2.使用CORS实现跨域

html代码

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>使用CORS实现跨域</title>
  </head>
  <body>
    <div class="container">
        <ul class="news"></ul>
        <button class="show">show news</button>
    </div>
  </body>
  <script type="text/javascript">
    $('.show').addEventListener('click',function(){
        var xhr = new XMLHttpRequest();
        xhr.open('GET','http://127.0.0.1:8080/getNews',true);
        xhr.send();
        xhr.onload = function(){
            appendHtml(JSON.parse(xhr.responseText));
        }
    })
    function appendHtml(news){
        var html = '';
        for(var i = 0; i < news.length; i++){
            html += '<li>' +news[i] + '</li>';
        }
        $('.news').innerHTML = html;
    }
    function $(selector){
        return document.querySelector(selector);
    }
  </script>
  </html>

server.js

  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://localhost:8080');
            //res.setHeader('Access-Control-Allow-Origin','*');
                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);
3.使用postMessage实现跨域

a.html

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>使用postMessage实现跨域</title>
    <style type="text/css">
        .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>
  </head>
  <body>
  <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>
  </body>
  <script type="text/javascript">
    //URL http://a.jrg.com:8080/a.html
    document.querySelector('.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

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>使用postMessage实现跨域</title>
    <style type="text/css">
        input{
            margin: 20px;
            width: 200px;
        }
    </style>
  </head>
  <body>
    <input id="input" type="text" placeholder="http://b.com:8080/b.html">
  </body>
  <script type="text/javascript">
    //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>
4.使用降域实现跨域

a.html

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>使用降域实现跨域</title>
    <style type="text/css">
        input{
            margin: 20px;
            width: 200px;
        }
    </style>
  </head>
  <body>
    <div class="main">
        <input type="text" placeholder="http://b.jrg.com:8080/b.html">
    </div>
    <iframe src="http://b.com:8080/b.html" frameborder="0"></iframe>
  </body>
  <script type="text/javascript">
    //URL http://b.jrg.com:8080/b.html
    document.querySelector('.main input').addEventListener('input',function(){
        console.log(this.value);
        window.frames[0].documentElement.querySelector('input').value = this.value;
    });
    document.domain = 'jrg.com';
  </script>
  </html>

b.html

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>使用降域实现跨域</title>
    <style type="text/css">
        .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>
  </head>
  <body>
    <div class="ct">
      <h1>使用降域实现跨域</h1>
      <div class="main">
        <input type="text" placeholder="http://a.com:8080/a.html">
      </div>
      <iframe src="http://b.com:8080/b.html" frameborder="0"></iframe>
    </div>
  </body>
  <script type="text/javascript">
    //URL  http://a.com:8080/a.html
    document.querySelector('.main input').addEventListener('input',function(){
        console.log(this.value);
        window.frames[0].documentElement.querySelector('input').value = this.value;
    });
    document.domain = 'jrg.com';
  </script>
  </html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容