面試--跨域

davidac 發布于2019-08-20 19:01 / 1747人閱讀

摘要：跨域的解決方法使用使用跨域請求資源共享是跨域資源請求機制，它要求當前服務器存放資源在響應的報頭中添加標簽從而指定當前服務器可以被跨域訪問服務器客戶端在前端頁面會顯示但是默認的只支持和請求。

同源策略

之所以出現跨域就是因為有同源的限制
同協議同域名同端口在能獲取資源在同源策略下域名A下可以訪問域名B下的腳本 css 和圖片但是A不能向B發起Ajax請求。

跨域的解決方法 使用CORS

使用CORS（跨域請求資源共享Cross-Origin Resource Sharing）是跨域資源請求機制，它要求當前服務器（存放資源）在響應的報頭中添加 Access-Control-Allow-Origin標簽從而指定當前服務器可以被跨域訪問
res.setHeader("Access-Control-Allow-Origin","*");
服務器

var http=require("http");
http.createServer(function (req,res) {
    res.setHeader("Access-Control-Allow-Origin","*");
    res.end("OK");
}).listen(1234);

客戶端

  $.ajax({url:"http://127.0.0.1:1234/",success:function (data) {
         $("div").text(data)
     }})

在前端頁面會顯示 OK
但是默認的cors只支持get和post請求。
關于 cors的詳細理解可以查看我的而另一篇文章 https://segmentfault.com/a/11...

Html5的解決方案-Cross-document messaging

使用postMessage（發送數據）方法和onMessage(接收數據) 事件來傳送不同域之間的通信

子頁面

 var ifr=window.parent;
    var targeOrigin="http://localhost:63342/reactWork";
    ifr.postMessage("asa1111",targeOrigin);

父頁面

實現了子頁面向父頁面發送消息ifr.postMessage()
在父頁面接收消息 window.addEventListener("message",function(){})

Html5的解決方案-WebSocket

WebSocket protocol 是h5的新協議實現了瀏覽器與服務器的雙工通信，同時允許跨域通信
下面是WebSocket同新的例子




    
    
   
    




sjaisja

客戶端的代碼

var WebSocketServer = require("ws").Server,
    wss = new WebSocketServer({ port: 8181 });
      wss.on("connection", function (ws) {
          console.log("開始連接")
          ws.on("message", function (message) {
              console.log(111)
              ws.send(message)
          })
      });

nodejs服務器端的代碼實現了瀏覽器和服務器的等位通信

JSONP

主要是利用 Script標簽不受同源限制的特性，向跨域服務器請求發揮一段JSON數據

常規前后端會約定好某個JSON 請求的callBack包裹起來。進而方便服務器區分收到的請求，也方便客戶端區分收到的響應。

客戶端

服務器

var http=require("http");
var urllib=require("url");
var data={"name":"111","addr":"222"};
http.createServer(function (req,res) {
    res.writeHead(200,{"Content-type":"text/plain"});
    var params=urllib.parse(req.url,true);
    if(params.query&¶ms.query.callback){
        console.log(params.query,params.query.callback)
        var str=params.query.callback+"("+JSON.stringify(data)+")";
        console.log(str)
        res.end(str);
    }else{
        res.end(JSON.stringify(data));
    }
}).listen(1234)

云服務器 GPU云服務器端跨域跨域 cdn跨域 SONP跨域

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85039.html

2018年騰訊前端一面總結（面向2019屆學生）

摘要：前言騰訊一面，相比阿里一面來說，騰訊一面先給打電話預定時間，這也給了我們這些面試者去準備的時間。其實閉包也就是指有權訪問另一個函數作用域的函數而已。常用的創建閉包的方法就是在函數內部創建另一個函數。前言騰訊一面，相比阿里一面來說，騰訊一面先給打電話預定時間，這也給了我們這些面試者去準備的時間。但是也正是因為這種確定性，也有在等待電話的時候的心情的忐忑。背景我是一名大三學生，大一...

Kosmos 2019-08-22 15:17 評論0 收藏0
一篇文章搞明白CORS跨域

摘要：跨域實在是面試官一個人的利器。首先，什么是是一個標準，全稱是跨域資源共享。它的值是一個布爾值，表示是否允許發送。設為，即表示服務器明確許可，可以包含在請求中，一起發給服務器。面試問到數據交互的時候，經常會問跨域如何處理。大部分人都會回答JSONP，然后面試官緊接著就會問：JSONP缺點是什么啊？這個時候坑就來了，如果面試者說它支持GET方式，然后面試官就會追問，那如果POST方式發送...

tanglijun 2019-08-23 13:42 評論0 收藏0
前端面試題-瀏覽器/服務端/網絡

摘要：同源策略是什么跨域通信同源兩個文檔同源需滿足協議相同域名相同端口相同跨域通信進行操作通信時如果目標與當前窗口不滿足同源條件，瀏覽器為了安全會阻止跨域操作。同源策略是什么？ javascript跨域通信同源：兩個文檔同源需滿足協議相同域名相同端口相同跨域通信：js進行DOM操作、通信時如果目標與當前窗口不滿足同源條件，瀏覽器為了安全會阻止跨域操作。跨域通信通常有以下方法 ...

jsdt 2019-08-23 15:35 評論0 收藏0
前端秋招面試總結

摘要：前言秋招宣告結束，面試了接近家公司，有幸拿到，感謝這段時間一起找工作面試的朋友和陪伴我的人。一定要提前準備好，不然面試官叫你說遇到的難點，或者直接問問題時可能會懵逼。前言秋招宣告結束，面試了接近20家公司，有幸拿到offer，感謝這段時間一起找工作面試的朋友和陪伴我的人。這是一段難忘的經歷，相信不亞于當年的高考吧，也許現在想起來高考不算什么，也許只有經歷過秋招的人才懂得找工作的艱辛...

Gu_Yan 2019-08-02 12:04 評論0 收藏0