鍍金池/ 問(wèn)答/人工智能  HTML/ 如何自己練習(xí)跨域？

如何自己練習(xí)跨域？

沒(méi)有自己購(gòu)買(mǎi)域名，服務(wù)器，如何練習(xí)跨域

回答
編輯回答
做不到

http-server
Easy Mock

2017年12月17日 12:57
編輯回答
北城荒

node寫(xiě)兩個(gè)不同端口的http服務(wù)，互相訪問(wèn)就可以了

2018年6月15日 00:37
編輯回答
愿如初

windows用IIS，linux用tomcat

2017年12月24日 04:19
編輯回答
孤酒

你去嘗試在前端獲取別人的接口 比如xx.qq.com.xx 有些接口是jsonp的 你就可以利用這個(gè)接口做練習(xí) 去抓他 轉(zhuǎn)成普通json,

還有些是jsop+加上一個(gè)請(qǐng)求域的鑒定的 你可以通過(guò)后端代理的方式，偽造頭信息 接著遞交給前端 這樣就算兩種了

2018年5月23日 19:11
編輯回答
貓館

使用本地nodejs+本地nginx搞定一切

2017年4月19日 15:47
編輯回答
尋仙

其實(shí)很簡(jiǎn)單的，在本地搭建個(gè)wamp環(huán)境，隨便整幾個(gè)（域名不同的）站點(diǎn)就可以了，然后發(fā)起請(qǐng)求，so easy.

2017年10月15日 19:51
編輯回答
舊言

可以使用docker，建幾個(gè)容器來(lái)學(xué)習(xí)調(diào)試

2017年2月20日 13:38
編輯回答
涼薄

在github上曾經(jīng)看過(guò)一個(gè)，覺(jué)得挺好的

cross-domain

2018年7月1日 21:15
編輯回答
萌吟

在谷歌瀏覽器上模擬，設(shè)置兩個(gè)服務(wù)器的域名為http://127.0.0.1:2000和http://127.0.0.1:8080，8080向2000端口下的域請(qǐng)求數(shù)據(jù)
方法1:jsonp

<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <div class="container">
      <div class="news">
        <li>中二少時(shí)誦詩(shī)書(shū)</li>
        <li>雙男力爭(zhēng)會(huì)師決賽</li>
        <li>女排死磕巴西</li>
      </div>
      <button id="change">換一組</button>
    </div>
    <script type="text/javascript">
      function $(x){
        return document.querySelector(x)
      }
      $('#change').addEventListener('click',function(){
        var script=document.createElement('script');
        script.src='http://127.0.0.1:2000/page1.json?callback=appendHtml'
        document.head.appendChild(script);
        
      })
    
      function appendHtml(data){
        var html = '';
        for(var i=0; i< data.length; i++){
            html += '<li>'+data[i]+'</li>'
        }
        console.log(html)
        $('.news').innerHTML = html;
    
      }
    
      
    </script>
  </body>
</html>

router.js部分


app.get('/page1.json',function(req,res){
  var news=[
  'aaaaaaaa',
  'bbbbbbbb',
  'cccccccc',
  'ddddddddd',
  'eeeeeeeee',
  'fffffffff',
  'ggggggggg'
  ]
  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;
  console.log(cb)
  if(cb){
    res.send(cb+'('+JSON.stringify(data)+')');
  }else{
    res.send(data)
    console.log(data)
  }
  //res.header("Access-Control-Allow-Origin",'*')
  
})

結(jié)果如圖
json1.png

jsonp2.png
方法2：cors
修改一下代碼，改成向2000端口發(fā)送ajax請(qǐng)求

   $('#change').addEventListener('click',function(){
      /*  var script=document.createElement('script');
        script.src='http://127.0.0.1:2000/page1.json?callback=appendHtml'
        document.head.appendChild(script);
        */
       var xhr=new XMLHttpRequest;
       xhr.onload=function(){
           appendHtml(xhr.response)
       }
       xhr.open('GET','http://127.0.0.1:2000/page1.json',true)
     xhr.send();
      })

得到的結(jié)果如圖

cors.png
現(xiàn)在我在2000端口的服務(wù)器上給8080端口的域授權(quán)


app.get('/page1.json',function(req,res){
  var news=[
  '啊啊啊啊啊啊a',
  '反反復(fù)復(fù)付付付付',
  'cの額鵝鵝鵝',
  'd啛啛喳喳',
  '少時(shí)誦詩(shī)書(shū)',
  'f啦啦啦啦綠',
  '世世代代發(fā)我'
  ]
  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;
  console.log(cb)
  if(cb){
    res.send(cb+'('+JSON.stringify(data)+')');
  }else{
    res.send(data)
    console.log(data)
  }*/
res.header("Access-Control-Allow-Origin","http://127.0.0.1:8080")
  res.send(data)
})

得到的結(jié)果如圖

cors2.png
cors.png

這樣就實(shí)現(xiàn)了跨域
方法3postMessege
window.postMessage()方法可以安全地實(shí)現(xiàn)跨源通信。通常，當(dāng)且僅當(dāng)執(zhí)行它們的頁(yè)面位于具有相同的協(xié)議（通常為https），端口號(hào)（443為https的默認(rèn)值），以及主機(jī)(模數(shù)?[Document.domain
](https://developer.mozilla.org...?由兩個(gè)頁(yè)面設(shè)置為相同的值)。?window.postMessage()方法提供了一種受控機(jī)制，以便在正確使用時(shí)以安全的方式規(guī)避此限制。
window.postMessage()方法被調(diào)用時(shí)，會(huì)在所有頁(yè)面腳本執(zhí)行完畢之后（e.g., 在該方法之后設(shè)置的事件、之前設(shè)置的timeout 事件,etc.）向目標(biāo)窗口派發(fā)一個(gè) ?[MessageEvent
](https://developer.mozilla.org...?消息。 該[MessageEvent
](https://developer.mozilla.org...消息有四個(gè)屬性需要注意： message 屬性表示該message 的類型；?data 屬性為?window.postMessage?的第一個(gè)參數(shù)；origin 屬性表示調(diào)用window.postMessage()方法時(shí)調(diào)用頁(yè)面的當(dāng)前狀態(tài)；?source 屬性記錄調(diào)用?window.postMessage()方法的窗口信息。
postMessage的用法為:otherWindow.postMessage(message, targetOrigin, [transfer]);
第一個(gè)參數(shù)為：我要發(fā)送的data,
第二個(gè)參數(shù)為：通過(guò)窗口的origin屬性來(lái)指定哪些窗口能接收到消息事件，其值可以是字符串""（表示無(wú)限制）或者一個(gè)URI，在發(fā)送消息的時(shí)候，如果目標(biāo)窗口的協(xié)議、主機(jī)地址或端口這三者的任意一項(xiàng)不匹配targetOrigin提供的值，那么消息就不會(huì)被發(fā)送；只有三者完全匹配，消息才會(huì)被發(fā)送。這個(gè)機(jī)制用來(lái)控制消息可以發(fā)送到哪些窗口；例如，當(dāng)用postMessage傳送密碼時(shí)，這個(gè)參數(shù)就顯得尤為重要，必須保證它的值與這條包含密碼的信息的預(yù)期接受者的orign屬性完全一致，來(lái)防止密碼被惡意的第三方截獲。如果你明確的知道消息應(yīng)該發(fā)送到哪個(gè)窗口，那么請(qǐng)始終提供一個(gè)有確切值的targetOrigin，而不是。不提供確切的目標(biāo)將導(dǎo)致數(shù)據(jù)泄露到任何對(duì)數(shù)據(jù)感興趣的惡意站點(diǎn)。
第三個(gè)參數(shù)為：Transfer，可選的參數(shù)，是一串和message 同時(shí)傳遞的?[Transferable
](https://developer.mozilla.org...?對(duì)象. 這些對(duì)象的所有權(quán)將被轉(zhuǎn)移給消息的接收方，而發(fā)送一方將不再保有所有權(quán)。
post1.png

如圖 在index設(shè)置兩個(gè)frame元素
index代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <iframe src="1.html" width="300px" height="300px"></iframe>
        <iframe src="2.html" width="300px" height="300px"></iframe>
        
    </body>
</html>

frames[0]代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <input  id="i1" value="" placeholder="1-input"/>
        <script type="text/javascript">
        function $(x){
            return document.querySelector(x)
        }
        $('#i1').addEventListener('input',function(){
            //console.log('this.input.value:'+this.value);
        
            window.parent.frames[1].postMessage(this.value,'*');
//                  給本頁(yè)面父節(jié)點(diǎn)的frame[1]發(fā)送消息
                //console.log(window.frames[0].postMessage);
        })
//接受發(fā)送的消息，因上面沒(méi)有指定給自己傳輸，所以收不到上面的消息
    window.addEventListener('message',function(e){
            $('#i1').value=e.data;
            //console.log('e.data:'+e.data)
        })
    
        </script>
    </body>
</html>

frame[1]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <input  id="i2" value="" placeholder="2-input"/>
        <script type="text/javascript">

        function $(x){
            return document.querySelector(x)
        }
    
        $('#i2').addEventListener('input',function(){
            //console.log('this.input.value:'+this.value);
            window.parent.frames[0].postMessage(this.value,'*')
//   給本頁(yè)面父節(jié)點(diǎn)的frame[1]發(fā)送消息
        })
        //接受發(fā)送的消息，因上面沒(méi)有指定給自己傳輸，所以收不到上面的消息
        window.addEventListener('message',function(e){
            $('#i2').value=e.data;
            
        })
        </script>
    </body>
</html>
2018年2月3日 18:45