關于跨域問題

Vicky 發布于2019-08-30 15:43 / 3516人閱讀

摘要：面試必考題吧，所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。

面試必考題吧，所以在這會詳細介紹以下內容

跨域產生的原因

羅列最常用的解決方法

分析各種方法原理

羅列各種方法優缺點

什么是跨域

由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。它是一個用于隔離潛在惡意文件的重要安全機制。同源即協議、域名、端口三者一致。不同源即跨域。

如果沒有同源策略會怎么樣？

比如：當你訪問了餅夕夕的網站

// HTML
// 餅夕夕.com 內嵌 拼多多.com


// JS
// 由于沒有同源策略的限制，釣魚網站可以直接拿到別的網站的Dom
// 所以 餅夕夕.com 可以在 拼多多.com 輸入賬號密碼處埋點
const $iframe = window.frames["pinduoduo"];
const $pwd = $iframe.document.getElementById("password");
console.log(`你的密碼已泄露: ${$pwd}`)

解決方案（主流）

1. JSONP -> get請求跨域
原理：script和img等標簽沒有跨域限制
實現方案：(舉例)

  // HTML 插入標簽
  

  // JS
  function say(name, age) {
    console.log(`${name}, ${age} 歲`)
  }

  // 服務器返回response
  say("zmz", 18)

  // 那么客戶端在script onload時會執行say方法

  // 結束

2. iframe+form實現post請求跨域
原理：利用form表單target屬性，將post請求提交給隱藏的iframe，使頁面不跳轉

  var data = {
    name: "zmz",
    age: 18
  }
  var url = "http://localhost/say";

  var $iframe = document.createElement("iframe");
  $iframe.name = "iframePost";
  $iframe.style.display = "none";
  document.body.appendChild($iframe);
  
  $iframe.addEventListener("load", function(e) {
    console.log($iframe.contentWindow)
  })
  
  const form = document.createElement("form");
  const ipt = document.createElement("input");
  form.action = url;
  form.enctype = "application/json;"
  form.method = "post";

  // 最核心的一行代碼
  // 在指定的iframe中執行form
  form.target = $iframe.name;

  for (var name in data) {
      ipt.name = name;
      ipt.value = data[name]; 
      form.appendChild(ipt.cloneNode());
  }
  form.style.display = "none";
  document.body.appendChild(form);
  form.submit();
  
  document.body.removeChild(form)

3. CORS 跨源資源共享
原理：新版XMLHttpRequest(ajax2.0)特性，服務器白名單
服務器端設置response.setHeader("Access-Control-Allow-xxx...

附：ajax2.0新特性

可以設置HTTP請求的時限xhr.timeout

可以使用FormData對象管理表單數據

可以上傳文件 >> 同上

可以請求不同域名下的數據（跨域請求）

可以獲取服務器端的二進制數據xhr.responseType = "blob"

可以獲得數據傳輸的進度信息 xhr.upload.process

CORS分類

簡單請求(自行搜索)

在請求頭信息中指定Origin

非簡單請求

會發送預檢請求(options)，返回狀態碼204

5. 代理
原理：服務器之間沒有跨域限制
具體實現：

  // Nginx配置
  server{
    # 監聽9099端口
    listen 9099;
    # 域名是localhost
    server_name localhost;
    # 匹配到都轉發到http://localhost:9871 
    location ^~ /api {
        proxy_pass http://localhost:9871;
    }    
}

5. postMessage
原理：postMessage可以處理各種瀏覽器窗口之間的通信問題。
具體實現：

  // 發送方
  window.frames["crossDomainIframe"]
  iframe.postMessage("我想要數據", "http://localhost:8088")

  window.addEventListener("message", function () {
    if (e.origin === "http://localhost:2333") {
      console.log("收到", e.data)
    }
  }

  // 接收方
  window.addEventListener("message", (e) => {
    if (e.origin === "http://localhost:8088") {
      console.log(e.data)
      e.source.postMessage("給，你要的數據", e.origin);
    }
  })

6. WebSocket
原理：新協議(socket)
實現方案：類似postMessage
附：

socket.io框架能解決兼容性問題

各種方式對比

JSONP和iframe+from兼容性很好

但是錯誤處理和RESTful接口統一是個問題

CORS最簡單粗暴

9102年了。微軟都不維護Win7了。

代理

肯定會慢一丟丟咯，而且要找運維配

postMessage

處理窗口間通信，- -。不嫌麻煩可以用來跨域

WebSocket

處理長連接，附帶跨域

End

文章分享同步于： https://github.com/zhongmeizh...

GPU云服務器云服務器跨域問題 cdn跨域問題 javascript跨域問題 js跨域問題

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

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

20K前端大佬面試(關于如何回答ajax跨域問題)

摘要：在接觸前端開發起，跨域這個詞就一直以很高的頻率在我們學習工作中重復出現，最近在工作中遇到了跨域的相關問題，這里我把它總結記錄一下。在接觸前端開發起，跨域這個詞就一直以很高的頻率在我們學習工作中重復出現，最近在工作中遇到了跨域的相關問題，這里我把它總結記錄一下。關于跨域，有N種類型，現在我只專注于ajax請求跨域(ajax跨域只是屬于瀏覽器同源策略中的一部分,其它的這里不做介紹)，內容...

Yangyang 2019-08-02 16:09 評論0 收藏0
關于vue-resource在dev環境下跨域問題的解決方法

摘要：跨域問題相信跨域問題是每個前端在請求中都會遇到的問題因為瀏覽器的同源策略的限制所以是不支持跨域的當然當后臺在沒有完成搭建的時候這時候我們需要使用到模擬數據的時候這時候很多的就會出現跨域問題在中當然這個問題也不例外如下所以在此我也就整理出了跨域問題相信跨域問題是每個前端在ajax請求中都會遇到的問題,因為瀏覽器的同源策略的限制,所以ajax是不支持跨域的,當然當后臺在沒有完成搭建的...

timger 2019-08-20 17:49 評論0 收藏0
關于跨域

摘要：服務端接收到請求后，通過該參數獲得回調函數名，并將數據放在參數中將其返回收到結果后因為是標簽，所以瀏覽器會當做是腳本進行運行，從而達到跨域獲取數據的目的。在使用Vue搭建的一個后端管理系統中，我使用axios請求本地的Node環境下的接口，但是請求失敗，然后我錯誤信息是：showImg(https://segmentfault.com/img/remote/1460000018521...

AlexTuan 2019-08-23 15:56 評論0 收藏0
關于跨域問題

摘要：面試必考題吧，所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。面試必考題吧，所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。它...

ZoomQuiet 2019-08-23 16:25 評論0 收藏0
關于跨域問題

摘要：面試必考題吧，所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。面試必考題吧，所以在這會詳細介紹以下內容跨域產生的原因羅列最常用的解決方法分析各種方法原理羅列各種方法優缺點什么是跨域由于瀏覽器廠商對安全性的考慮，提出了瀏覽器的同源策略做為解決方案。它...

livem 2019-08-02 16:09 評論0 收藏0