HTTP知識點（前端需掌握）

1.五層因特網協議棧

應用層

應用層決定了向使用者提供應用服務時通訊的活動，應用程式間的通訊和互動的規則。如HTTP協議，域名系統DNS，檔案傳輸協議FTP，電子郵件協議SMTP。

域名系統DNS：負責解析域名，提供域名到IP地址之間的解析服務。

HTTP協議：超文字傳輸協議，是網際網路應用最廣泛的網路協議，所有的全球資訊網（wwww）檔案都必須遵守這個標準。

 

傳輸層

提供處於網路連線中的兩臺計算機之間的資料傳輸，會傳輸應用層的相關報文。其中有兩個不同性質的協議TCP和UDP

TCP：提供面向連線的，提供可靠的位元組流服務（為了方便傳輸，把大塊資料分割成以報文為單位的資料包，進行管理）。提供全雙工通訊，首部有20個位元組

三次握手：為了準確無誤的將資料包送到目的處，會採用三次握手策略。傳送端首先會傳送一個帶有SYN標誌的資料包給對方，對方接收後，會回傳一個帶有SYN/ACK標誌的資料包，表達確認資訊。傳送端在回傳一個帶有ACK標誌的資料包，表示結束。如果某一個階段莫名其妙的中斷，TCP會按照相同的順序繼續傳送相同的資料包。

 

UDP：無連線的，面向報文的，盡最大可能的交付，不保證可靠支付，沒有擁塞控制，支援一對一，一對多，多對一，多對多的互動通訊，首部開銷小隻有8個位元組

 

網路層（網路互連層）

處理網路上流動的資料包，規定透過怎麼樣的路勁（傳輸路線）達到接收方主機，並把資料包傳給對方

 

資料鏈路層

來處理連線網路的硬體部分。包括控制作業系統，硬體的裝置驅動等，硬體上的範疇都在鏈路層的範圍內。

 

物理層

物理層上傳輸的單位是位元，實現相鄰計算機節點之間位元流的透明傳輸，盡肯能遮蔽具體傳輸介質和物理裝置的差異。

 

OSI 七層協議模型

應用層 => 表示層 => 會話層 => 傳輸層 => 網路層 => 資料鏈路層 =>物理層

 

TCP/IP四層模型

應用層 => 傳輸層 => 網路層 => 資料鏈路層

 

各層對應圖例

 HTTP和HTTPS的區別

協議：

HTTP：執行在TCP上，明文傳輸，客戶端和服務端都無法驗證對方的身份。

HTTPS：執行在SSL（安全套接層）上，SSL執行在TCP上，新增了加密和認證機制。

 

埠：

HTTP：80

HTTPS：443

 

資源消耗：

HTTP：較少

HTTPS：由於有加密操作會更多的消耗CUP和記憶體資源。

 

開銷：

HTTP：無需證照。

HTTPS：需要證照，證照一般要向認證機構購買。

 

加密機制：

HTTP：無

HTTPS：共享金鑰加密和公開金鑰加密並且用的是混合加密機制

 

安全性：

HTTP：弱

HTTPS：強

 

對稱加密和非對稱加密

對稱加密：加密和解密都使用同一個金鑰，存在的問題是金鑰如何傳送給對方。

非對稱加密：加密用公鑰和私鑰，公鑰可以隨便釋出，私鑰只有自己有。傳送的密文用公鑰加密，接受方用私鑰解密，相對於安全，但是速度慢。

 

 HTTP2

HTTP1：瀏覽器中限制了同一個域名下的請求數量（Chrome一般6個），請求很多資源的時候，要等前6個請求後才會傳送請求。

HTTP2：引用了多路複用技術，透過一個TCP連線可以傳輸所有的請求數量。可以不受同一個域名下請求數量的問題。

 

跨域

原因：因為瀏覽器的同源策略（協議，域名，埠）

不受同源策略限制的標籤： <script> <img> <iframe> <link> 有src屬性 可以載入跨域資源。

解決方案：

1. JSONP

 利用script標籤的src屬性，指向一個訪問的地址並提供一個callback來接收資料。相對於簡單，只能支援get方式。（在head標籤動態新增script標籤，success幫window隨機起名字）

function jsonp(url, jsonpCallback, success) {  let script = document.createElement('script')  script.src = url  script.async = true  script.type = 'text/javascript'  window[jsonpCallback] = function(data) {    success && success(data)  }  document.body.appendChild(script)}jsonp('', 'callback', function(value) {  console.log(value)})

2.CORS （跨域資源共享）

需要瀏覽器和後端同時支援，瀏覽器自動進行cors通訊，主要是後端伺服器要設定 Access-Control-Allow-Origin ，就可以開啟cors ,這個屬性表示允許哪些哪些域名可以訪問資源，假如設定成萬用字元，所有網站都可以訪問資源。

3.nginx 代理

利用nginx實現反向代理

server {
    listen 8080;                         # 監聽的埠
    server_name  192.168.1.1;            # 配置訪問域名
    root  /data/toor;                    # 站點根目錄
    error_page 502 404 /page/404.html;   # 錯誤頁面
    location ^~ /api/  {                        # 使用 /api/ 代理 proxy_pass 的值
        proxy_pass http://192.168.20.1:8080;    # 被代理的應用伺服器 HTTP 地址    }
}

Vue中用proxyTable

proxyTable: {    '/weixin': {
        target: 'http://192.168.48.11:8100/', // 介面的域名 
        secure: false,      // 如果是 https 介面，需要配置這個引數
        changeOrigin: true, // 如果介面跨域，需要進行這個引數配置        pathRewrite: {            '^/weixin': ''
        }
    },
},

原生vue

this.$http.jsonp('', {
    params: {},
    jsonp: 'onBack'}).then((res) => {
    console.log(res); 
})

4. document.domain + iframe 跨域

5. webSocket 協議跨域

6. node 中介軟體代理跨域

7. postMessage跨域

8. window.name + iframe跨域

9. location.hash + iframe跨域

跨域方式詳解（）

常見狀態碼：

1XX：臨時響應並表示請求者繼續執行操作

100：繼續操作

101：切換協議，請求者要求伺服器更換協議，伺服器已經確認並準備切換

2XX：成功

200：伺服器已經成功處理了請求

204：伺服器已經成功處理了請求，但是沒有返回任何內容

206：伺服器成功處理了部分get請求（有範圍限制）

3XX：重定向

301：永久重定向 請求的網頁已經移動到新位置

302：臨時重定向 請求的網頁臨時定位到其他位置了

303：檢視其他的位置 和302有相同的功能但是303明確要求使用get方法獲取資源

304：未修改 從上次請求的網頁未修改過，可以直接用客戶端沒有過期的快取

305：使用代理 請求者只能使用代理訪問請求的網頁

307：臨時重定向 和302類似 不會成post變成get

4XX：請求錯誤

400：伺服器不理解請求的語法，語法錯誤（可能後臺未部署）

401：未授權 要求身份驗證

404：禁止 不允許訪問該資源

404：未找到 伺服器找不到請求的網頁

405：方法禁用 禁用請求中使用的方法

5XX：伺服器錯誤

500：伺服器內部錯誤

501：尚未實施 伺服器尚不具備請求功能

502：錯誤閘道器 伺服器作為閘道器或者代理，從上游伺服器收到無效響應

503：服務不可用 伺服器停機維護或超載 暫時狀態

504：閘道器超時 伺服器作為閘道器或者代理。沒有及時從上游伺服器收到請求

更詳細請移步（https://www.cnblogs.com/lgp2000/p/6874554.html）

從位址列輸入url到頁面載入完成，發生了什麼？

1. 從瀏覽器的位址列輸入URL並按下回車

2. 瀏覽器查詢當前url是否存在快取，並比較快取是否過期

3. NDS解析URL對應的IP

4. 根據IP地址建立TCP連結

5. HTTP傳送請求

6. 伺服器處理請求，瀏覽器接收HTTP響應

7. 渲染頁面，構建DOM樹

8. 關閉TCP連結

快取：HTTP快取有很多種規則，根據是否需要重新向伺服器發起請求來分類。會有強制快取和對比快取。

強制快取判斷HTTP首部欄位 cache-control Expires

Expires：是絕對時間，即伺服器時間。如果還沒到失效時間就直接使用快取檔案。但是該方法存在一個問題：伺服器時間與客戶端時間可能不一致。因此該欄位已經很少使用。

cache-control中的max-age儲存一個相對時間。例如Cache-Control: max-age = 484200，表示瀏覽器收到檔案後，快取在484200s內均有效。 如果同時存在cache-control和Expires，瀏覽器總是優先使用cache-control。

對比快取透過HTTP的last-modified，Etag欄位進行判斷。

last-modified是第一次請求資源時，伺服器返回的欄位，表示最後一次更新的時間。下一次瀏覽器請求資源時就傳送if-modified-since欄位。伺服器用本地Last-modified時間與if-modified-since時間比較，如果不一致則認為快取已過期並返回新資源給瀏覽器；如果時間一致則傳送304狀態碼，讓瀏覽器繼續使用快取。

Etag：資源的實體標識（雜湊字串），當資源內容更新時，Etag會改變。伺服器會判斷Etag是否發生變化，如果變化則返回新資源，否則返回304。

 TCP 四次揮手，關閉連線

關閉連線需要傳送四個包

 

作者：

原文出處：https://www.cnblogs.com/xiaxuening/p/10485879.html