国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關(guān)于跨域問題

ZoomQuiet / 1068人閱讀

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

面試必考題吧，所以在這會(huì)詳細(xì)介紹以下內(nèi)容

跨域產(chǎn)生的原因

羅列最常用的解決方法

分析各種方法原理

羅列各種方法優(yōu)缺點(diǎn)

什么是跨域

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

如果沒有同源策略會(huì)怎么樣？

比如：當(dāng)你訪問了 餅夕夕的網(wǎng)站

// HTML
// 餅夕夕.com 內(nèi)嵌 拼多多.com


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

1. JSONP -> get請(qǐng)求跨域
原理：script和img等標(biāo)簽沒有跨域限制
實(shí)現(xiàn)方案：(舉例)

  // HTML 插入標(biāo)簽
  

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

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

  // 那么客戶端在script onload時(shí)會(huì)執(zhí)行say方法

  // 結(jié)束

2. iframe+form實(shí)現(xiàn)post請(qǐng)求跨域
原理：利用form表單target屬性，將post請(qǐng)求提交給隱藏的iframe，使頁(yè)面不跳轉(zhuǎn)

  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中執(zhí)行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)特性，服務(wù)器白名單
服務(wù)器端設(shè)置response.setHeader("Access-Control-Allow-xxx...

附：ajax2.0新特性

可以設(shè)置HTTP請(qǐng)求的時(shí)限xhr.timeout

可以使用FormData對(duì)象管理表單數(shù)據(jù)

可以上傳文件 >> 同上

可以請(qǐng)求不同域名下的數(shù)據(jù)（跨域請(qǐng)求）

可以獲取服務(wù)器端的二進(jìn)制數(shù)據(jù)xhr.responseType = "blob"

可以獲得數(shù)據(jù)傳輸?shù)倪M(jìn)度信息 xhr.upload.process

CORS分類

簡(jiǎn)單請(qǐng)求(自行搜索)

在請(qǐng)求頭信息中指定Origin

非簡(jiǎn)單請(qǐng)求

會(huì)發(fā)送預(yù)檢請(qǐng)求(options)，返回狀態(tài)碼204

5. 代理
原理：服務(wù)器之間沒有跨域限制
具體實(shí)現(xiàn)：

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

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

  // 發(fā)送方
  window.frames["crossDomainIframe"]
  iframe.postMessage("我想要數(shù)據(jù)", "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("給，你要的數(shù)據(jù)", e.origin);
    }
  })

6. WebSocket
原理：新協(xié)議(socket)
實(shí)現(xiàn)方案：類似postMessage
附：

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

各種方式對(duì)比

JSONP和iframe+from兼容性很好

但是錯(cuò)誤處理和RESTful接口統(tǒng)一是個(gè)問題

CORS最簡(jiǎn)單粗暴

9102年了。微軟都不維護(hù)Win7了。

代理

肯定會(huì)慢一丟丟咯，而且要找運(yùn)維配

postMessage

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

WebSocket

處理長(zhǎng)連接，附帶跨域

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/103003.html

相關(guān)文章

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

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

    Yangyang 評(píng)論0 收藏0

  • 關(guān)于vue-resource在dev環(huán)境下跨域問題的解決方法

    摘要：跨域問題相信跨域問題是每個(gè)前端在請(qǐng)求中都會(huì)遇到的問題因?yàn)闉g覽器的同源策略的限制所以是不支持跨域的當(dāng)然當(dāng)后臺(tái)在沒有完成搭建的時(shí)候這時(shí)候我們需要使用到模擬數(shù)據(jù)的時(shí)候這時(shí)候很多的就會(huì)出現(xiàn)跨域問題在中當(dāng)然這個(gè)問題也不例外如下所以在此我也就整理出了 跨域問題 相信跨域問題是每個(gè)前端在ajax請(qǐng)求中都會(huì)遇到的問題,因?yàn)闉g覽器的同源策略的限制,所以ajax是不支持跨域的,當(dāng)然當(dāng)后臺(tái)在沒有完成搭建的...

    timger 評(píng)論0 收藏0

  • 關(guān)于跨域

    摘要：服務(wù)端接收到請(qǐng)求后，通過該參數(shù)獲得回調(diào)函數(shù)名，并將數(shù)據(jù)放在參數(shù)中將其返回收到結(jié)果后因?yàn)槭菢?biāo)簽，所以瀏覽器會(huì)當(dāng)做是腳本進(jìn)行運(yùn)行，從而達(dá)到跨域獲取數(shù)據(jù)的目的。 在使用Vue搭建的一個(gè)后端管理系統(tǒng)中，我使用axios請(qǐng)求本地的Node環(huán)境下的接口，但是請(qǐng)求失敗，然后我錯(cuò)誤信息是：showImg(https://segmentfault.com/img/remote/1460000018521...

    AlexTuan 評(píng)論0 收藏0

  • 關(guān)于跨域問題

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

    livem 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<