前端垮域問題有哪些經常使用的解決方式？？

時間 2020-05-11

標籤前端問題哪些經常使用解決方式简体版

原文原文鏈接

這裏是修真院前端小課堂，每篇分享文從javascript

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】html

八個方面深度解析前端知識/技能，本篇分享的是：前端

【前端垮域問題有哪些經常使用的解決方式？？】java

你們好，我是IT修真院西安分院第5期的學員許恆倩，一枚正直純潔善良的web程序員，今天給你們分享一下，修真院官網js任務五，深度思考中的知識點——前端垮域問題有哪些經常使用的解決方式？？程序員

1.背景介紹：web

1.1 什麼是跨域？ajax

指的是瀏覽器不能執行其餘網站的腳本。它是由瀏覽器的同源策略形成的，是瀏覽器對javascript施加的安全限制。 json

1.2 爲何須要跨域？跨域

受瀏覽器同源策略的限制，本域的js不能操做其餘域的頁面對象（好比DOM）。但在安全限制的同時也給注入iframe或是ajax應用上帶來了很多麻煩。因此咱們要經過一些方法使本域的js可以操做其餘域的頁面對象或者使其餘域的js能操做本域的頁面對象（iframe之間）。瀏覽器

2.知識剖析

1.同源策略：

它是由Netscape提出的一個著名的安全策略。同源是指，域名，協議，端口相同。瀏覽器執行javascript腳本時，會檢查這個腳本屬於那個頁面，若是不是同源頁面，就不會被執行。

2.爲何script標籤引入的文件不受同源策略的限制？

由於script標籤引入的文件內容是不可以被客戶端的js獲取到的，不會影響到被引用文件的安全，因此不必使script標籤引入的文件遵循瀏覽器的同源策略。而經過ajax加載的文件內容是可以被客戶端js獲取到的，因此ajax必須遵循同源策略，不然被引入文件的內容會泄漏或者存在其餘風險。

3.靜態HTTP服務器：Nginx是一個HTTP服務器，能夠將服務器上的靜態文件（如HTML、圖片）經過HTTP協議展示給客戶端

4.反向代理服務器：客戶端原本能夠直接經過HTTP協議訪問某網站應用服務器，網站管理員能夠在中間加上一個Nginx，客戶端請求Nginx，Nginx請求應用服務器，而後將結果返回給客戶端，此時Nginx就是反向代理服務器。

5.負載均衡:當網站訪問量很是大，一臺服務器已經不夠用了。因而將同一個應用部署在多臺服務器上，將大量用戶的請求分配給多臺機器處理。Nginx能夠經過反向代理來實現負載均衡。

3.常見問題

前端垮域問題有哪些經常使用的解決方式？

4.解決方案

4.1 window.name + iframe

window.name的美妙之處：name值在不一樣的頁面（甚至不一樣域名）加載後依舊存在，而且能夠支持很是長的name值（2MB）。原理：利用了「在同一瀏覽器窗口載入的不一樣頁面（不管它們是否不一樣域），共享同一個window.name，而且都對window.name有讀寫的權限」的這一特性來實現頁面間的數據交換

4.2 CORS

CORS背後的思想，就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功，仍是應該失敗。CORS須要瀏覽器和服務器同時支持。目前，全部瀏覽器都支持該功能，IE瀏覽器不能低於IE10。整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與。對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感受。所以，實現CORS通訊的關鍵是服務器。只要服務器實現了CORS接口，就能夠跨源通訊。

4.3 JSONP

JSONP包含兩部分：回調函數和數據。回調函數是當響應到來時要放在當前頁面被調用的函數。數據就是傳入回調函數中的json數據，也就是回調函數的參數了。

jsonp雖然很簡單，可是有以下缺點：

1）安全問題(請求代碼中可能存在安全隱患);

2）要肯定jsonp請求是否失敗並不容易。

4.4 配置Nginx經過域名訪問網頁

5.編碼實戰

<body>

<input type="text" id="ipt">

<ul id='ul'>

<li></li>

</ul>

</body>

</html>

<script type="text/javascript">

$('#ipt').blur(function () {

// console.log(1)

// 提供jsonp服務的url地址（不論是什麼類型的地址，最終生成的返回值都是一段javascript代碼）百度搜索接口

var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=search&wd=" + $('#ipt').val();

// 建立script標籤，設置其屬性

var script = document.createElement('script');

script.setAttribute('src', url);

// // 把script標籤加入head，此時調用開始

document.getElementsByTagName('head')[0].appendChild(script);

})

// 定義回調函數

function search(data) {

console.log(data);

for(var i =0;i<data.s.length;i++){

$('#ul').append( <li>${data.s[i]}</li>)

}

};

</script>

6.擴展思考

還有什麼其餘的跨域的方法？

location.hash + iframe

原理是利用location.hash來進行傳值。假設域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html傳遞信息。

1)cs1.html首先自動建立一個隱藏的iframe，iframe的src指向cnblogs.com域名下的cs2.html頁面；

2)cs2.html響應請求後再將經過修改cs1.html的hash值來傳遞數據；

3)同時在cs1.html上加一個定時器，隔一段時間來判斷location.hash的值有沒有變化，一旦有變化則獲取hash值

7.參考文獻

參考：

前端解決跨域問題的8種方案（最新最全）

深刻理解前端跨域方法和原理

8.更多討論

9.結束語：

相關文章

相關標籤/搜索

Python問題解決

未解決問題

問題-已解決

問題與解決

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<