跨域的解決方式

jsonp

html中可以通過script標簽引入其他域的js，利用這一特性，結(jié)合后端支持，可以實現(xiàn)跨域訪問接口
實現(xiàn)原理：

  1. 定義數(shù)據(jù)處理函數(shù)_fun
  2. 創(chuàng)建script標簽，src的地址執(zhí)行后端接口，最后加個參數(shù)callback=fun
  3. 服務端在收到請求后，解析參數(shù)，計算返還數(shù)據(jù)，輸出 fun(data) 字符串。
  4. fun(data)會放到script標簽做為js執(zhí)行。此時會調(diào)用fun函數(shù)，將data做為參數(shù)。

前端代碼：

<!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金 博爾特再戰(zhàn)</li>
      <li>男雙力爭會師決賽 </li> 
      <li>女排將死磕巴西！</li>
    </ul>
    <button class="change">換一組</button>
  </div>

<script>

$('.change').addEventListener('click',function(){
  var script = document.createElement('script');
  script.src = 'http://127.0.0.1/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>' + new[i] + '</li>';
  }
  console.log(html);
  $('.news').innerHTML = html;
}
function$(id){
  return document.querySelector(id);
}

</script>

</html>

后端代碼：

app.get('/getNews',function(req,res){
  var news =[
        "第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)200米羽球",
        "正直播柴飚/洪煒出戰(zhàn) 男雙力爭會師決賽",
        "女排將死磕巴西！郎平安排男陪練模仿對方核心",
        "沒有中國選手和巨星的110米欄 我們還看嗎？",
        "中英上演奧運金牌大戰(zhàn)",
        "博彩賠率挺中國奪回第二紐約時報：中國因?qū)κ址幎鴣G失的獎牌最多",
        "最“出柜”奧運？同性之愛閃耀里約",
        "下跪拜謝與洪荒之力一樣 都是真情流露"
  ]
  var data = [];
  for (var i = 0; i < 3; i++) {
    var index = parse(Math,random()*news.length);
    data.push(news[index]);
    news.splice(index,1);
  }

  var cb = req.query.callback;
  if(cb){
    res.send(cb + '(' + JSON.stringfy(data) + ')');
  }else{
    res.send(data);
  }

})

CORS

CORS 全稱是跨域資源共享（Cross-Origin Resource Sharing），是一種 ajax 跨域請求資源的方式，支持現(xiàn)代瀏覽器，IE支持10以上。
實現(xiàn)方式：

  1. 使用XMLHttpRequest發(fā)送請求時，服務器發(fā)現(xiàn)不同源會在請求中加一個請求頭Origin
  2. 后臺確定接受該請求，則在響應頭中加一個Access-Control-Allow-Origin
  3. 瀏覽器判斷該響應頭中包含origin則響應請求，沒有不響應

前端代碼：

<!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金 博爾特再戰(zhàn)</li>
      <li>男雙力爭會師決賽 </li> 
      <li>女排將死磕巴西！</li>
    </ul>
    <button class="change">換一組</button>
  </div>

<script>

  $('.change').addEventListener('click', function(){
    var xhr = new XMLHttpRequest();
    xhr.open('get','http://b.jrg.com:8080/getNews',true);
    xhr.send();
    xhr.onreadysTatechange = function(){
      if(xhr..readyState === 4 && xhr.status === 200){
        appendHtml(JSON.parse(xhr.responseText))
      }
    }
    window.xhr = xhr
})
  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>

后端代碼

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

    var news = [
        "第11日前瞻：中國沖擊4金 博爾特再戰(zhàn)200米羽球",
        "正直播柴飚/洪煒出戰(zhàn) 男雙力爭會師決賽",
        "女排將死磕巴西！郎平安排男陪練模仿對方核心",
        "沒有中國選手和巨星的110米欄 我們還看嗎？",
        "中英上演奧運金牌大戰(zhàn)",
        "博彩賠率挺中國奪回第二紐約時報：中國因?qū)κ址幎鴣G失的獎牌最多",
        "最“出柜”奧運？同性之愛閃耀里約",
        "下跪拜謝與洪荒之力一樣 都是真情流露"
    ]
    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://a.jrg.com:8080"); 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.send(data);
})

降域

降域的使用條件是兩個名的一級域名相同（例如: a.test.com 與 b.test.com）都同屬于test.com這個域名

測試時需使用a.test.com:8080/a.html訪問，不能使用localhost，否則會報錯：報錯信息為不能把domain設置為test.com

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>使用降域?qū)崿F(xiàn)跨域</h1>
        <div class="main">
            <input type="text" placeholder="http://a.test.com:8080/a_jiangyu.html">
        </div>

        <iframe src="http://b.test.com:8080/b_jiangyu.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;
        })

        //取一級域名作為domain
        document.domain = "test.com"
    </script>

    </html>

b.html

  <html>
    <style>
        html,
        body {
            margin: 0;
        }

        input {
            margin: 20px;
            width: 200px;
        }
    </style>

    <input id="input" type="text" placeholder="http://b.jiangyu.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;
        })

        //取一級域名作為domain
        document.domain = 'test.com';
    </script>

    </html>

PostMessage

使用window.postMessage() 實現(xiàn)
postMessage的原理是會向另一個地方發(fā)送信息，另一個地方通常是iframe,或者是由當前頁面彈出的窗口。參數(shù)是：信息以及表示接受消息方的來自哪個域的字符串，如果給定*便是不限定接受者的域。

a.html

   <html>
    <style>
        .ct {
            width: 910px;
            margin: auto;
        }

        .ct h1 {
            text-align: center;
        }

        .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實現(xiàn)跨域</h1>
        <div class="main">
            <input type="text" placeholder="http://a.test.com:8080/a.html">
        </div>

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

    </div>


    <script>
        //URL: http://a.test.com:8080/a.html
        $('.main input').addEventListener('input', function() {
            window.frames[0].postMessage(this.value, '*');
        })
        window.addEventListener('message', function(e) {
            $('.main input').value = 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.test.com:8080/b.html">
    <script>
        // URL: http://b.test.com:8080/b.html

        $('#input').addEventListener('input', function() {
            window.parent.postMessage(this.value, '*');
        })
        window.addEventListener('message', function(e) {
            $('#input').value = e.data
        });

        function $(id) {
            return document.querySelector(id);
        }
    </script>

    </html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 跨域有很多種方式，下面就簡單說說跨域最常見的幾種解決方式1、JSONPJSONP是服務器與客戶端跨源通信的常用方法...
    小囧兔閱讀 474評論 0贊 0
  • jsonp html中可以通過script標簽引入其他域的js，利用這一特性，結(jié)合后端支持，可以實現(xiàn)跨域訪問接口實...
    billa_8f6b閱讀 450評論 0贊 0
  • JSONP JSONP（JSON with Padding）是資料格式JSON的一種“使用模式”，可以讓網(wǎng)頁從別的...
    阿魯提爾閱讀 280評論 0贊 0
  • 文|李凌 那天有位朋友說對教育的話題感興趣。我呢不是專業(yè)的，是一位普通媽媽，只能算是一位教育的探索者。每一位媽...
    花間精凌閱讀 583評論 0贊 1
  • 解釋JavaScript的事件循環(huán) 這個帖子關于什么 瀏覽器普遍將JavaScript作為腳本語言，這篇文章有利于...
    老虎愛吃母雞閱讀 587評論 0贊 0

友情鏈接更多精彩內(nèi)容