[第六週] 網路基礎-
HTTP、Request、Response

MiaHsu

10 min readApr 8, 2020

學習目標：知道什麼是 Request 跟 Response；DNS 的運作原理。

本文主要源自 Huli 從傳紙條輕鬆學習基本網路概念，並參考以下資料的學習整理：

我們在 [第六週] 網路基礎 — TCP/ IP 談了資料傳遞的過程當中會經過層層的協定（中間 Internet），這邊我們將來談談兩側的部分

Photo by Django Request and Response Lifecycle

Client & Server

在傳遞資訊的兩端我們稱之為「客戶端（Client）」、「伺服器端（Server）」

客戶端（Client）

以網頁來說就是你的瀏覽器（Browser），會發出「請求 Request」傳遞到 Server 端。

伺服器端（Server）

收到 Request 後，會開始處理資料，然會回傳「回應 Response」到 Client 端。

應用層：HTTP 及 DNS

HTTP 及 DNS 都是屬於 TCP/IP 的應用層，以下詳細說明這兩個東西：

HTTP

全名 HyperText Transfer Protocol，中文為超文本傳輸協定
是全球資訊網的通訊基礎，當我們在上網或網頁前端跟後端做溝通時就要遵照 HTTP 「協定」
預設 port ：80
以傳紙條的來說就是你要哪種服務？訂便當、訂飲料、借籃球…，所以如果你要透過網路服務，就要遵照 HTTP 「協定」。

HTTPS

全名 HyperText Transfer Protocol Secure，中文為超文本傳輸安全協定
由於 HTTP 一直都有安全性的問題，因此 HTTPS 就是基於 HTTP 並利用 SSL/TLS 將資訊加密封包的另一種更安全的協定。
預設 port ：443

[補充說明] 為什麼 HTTP 不安全1. HTTP 傳遞是使用明文的方式並不具備加密的功能，所以無法對內容進行加密。2. 不會對 client 端與 server 進行驗證，無法確定兩端是否為正確的（小明傳給小美的信可能中途被小王攔截）

DNS

全名 Domain Name System，中文為用網域名稱系統
將「域名（Domain）」就是「網址」轉換成實際的 IP Adress

當瀏覽器傳 Request 到 Server，其實我們並沒有給與 IP Address ，那這樣就不能達成 TCP 三次握手（Three-way handshake）了啊！

那到底是如何達成的呢？

其實當瀏覽器發送 HTTP Request 前，會先利用 DNS把網址轉換成實際的 IP Adress，如此一來就可以進行 TCP 三次握手。

打開 DevTool，Network Header 的部分可以看到 url 跟 IP 位置。

如何看到網頁內容的？

瀏覽器傳 HTTP Request 到 Server
Server 回傳一個 Response

那到底是傳了什麼東西回來呢？

我們打開 DevTool 到 Network 再重新整理一次，就會開始偵測目前頁面上瀏覽器傳遞的所有 Request 每個傳遞回來的 Response 集成了這個網頁。

瀏覽器只是一個應用程式

其實瀏覽器幫我們做的就是發送一堆 Request、接收一堆 Response，根據 html 裡面的內容再進行資源下載，而更詳細 request 發送順序可參考以下：

DNS 將 url 解析成 IP 位置，
瀏覽器(Client)將 IP 包成一個 Request 發送出去。
Request 透過 Internet 的層層協定發送到 Server 端。
Server 端解析 Request
在 data center 撈取有關 JavaScript 的資料
包成一個 Response 回傳。
Client 端開始解析 Response、解析 .html 檔案。
根據 .html 的檔案內容，一旦發現有 CSS、JS 或 image 等檔案，再發送個檔案的 Request 。
Client 端發送完包含在 html 所有資源的 Request。
開始下載資源（CSS、JS 或 image）。
渲染網頁。

深入了解 Request ＆ Response

這時候我們要回到傳紙條的第二集：便當篇

根據 HTTP 通訊協定其中的內容 Request ＆ Response 有標準化內容格式，並且都包含了 header 和 body

1. 標準化內容格式2. 分為 header 跟 body3. 用狀態碼標準化結果 （Http status code）4. 用動詞標準化請求方法 （Http Request Method）其實這四個其實就是 HTTP 通訊協定的內容。

header

大部分會包含：

IP 位置
Http Request Method 狀態碼
Http status code 請求方法

其他額外資訊也會放在這裡，例如：Client-ID、User-Agent、Authorization 等。＃在 API 串接時會使用到。

body

主要傳遞的內容，但也有可以沒有內容。

Http Request Method

在早期 http 1.1 為了區分 Request 不同的用途，使用動詞標準化讓 Server 能清楚辨別 Request 的目的，定義了八種 Method，最常見的 Method 為 Get 及Post。

Get

單純的跟 server 要一個連結或圖片，通常網頁都是 Get 的 request 比較多
最常使用的 Method
例如：要去某個網址、看某張圖片
傳送的資料會以 Query String 的方式加在 url 上

Post

需要執行一些動作時，會傳送 Post request
例如：登入會員、送出表單
獲取「指定的」資訊，放在 request body（Form data）裡面

其他的 HTTP Request Method

Put ：取代掉整個 request。
Patch：修改部分 request。
Delete：刪除資源。
Head：只要獲取 request 的 header，不要 body。
Option：可以了解 server 提供哪些溝通方法。

Http status code 狀態碼

用數字表示 reponse 的狀態，通常以開頭的數字做判斷

1xx ：稍等

100 Continue：Server 成功接收、但 Client 還要進行一些處理。

2xx：成功

200 OK：成功
204 No Content：成功但沒有回傳的內容（當你發出 Delete 的 request）

3xx：重新導向，用戶端瀏覽器必須採取更多動作才能完成要求。

301 Moved Permanently：資源「永久」移到其他位置，再下一次發出 request 時，瀏覽器直接到新位置。
302 Found（Moved Temporarily）：資源「暫時」移到其他位置。
304 Not Modified：東西跟之前長一樣，可以從快取拿就好。

4xx：Client 端錯誤

400 Bad Request：請求語法錯誤、或資源太大…等等。
401 Unauthorized：未認證，可能需要登入或 Token。
403 Forbidden：沒有權限。
404 Not Found：找不到資源。

5xx：Service 端錯誤

500 Internal Server Error：伺服器出錯，搶票時很可能發生。
501 Not Implemented
502 Bad Gateway：通常是伺服器的某個服務沒有正確執行。

在瀏覽器上要如何查看 Request ＆ Response 的資訊呢？

以 Medium 為例

Request 跟 Response 的 headers：[DevTool] command + option + i > network > headers

Response：[DevTool command + option + i > network > Response

實做 Client 端

除了瀏覽器外，我們可以利用 request（Simplified HTTP client），模擬瀏覽器發送 request。

Step1. 在專案資料夾載入 request

$ npm install request

Step2. 在專案資料夾內新增 test.js 並貼上官網提供的範本

有多新增一行 console.log('head:', response.headers); ＃印出 response 的 header

Step3. 執行後得到 response 內容

$ node test.js

實作 Server 端

利用 node.js 內建 library : http 就可以在自己的電腦上建立一個 Server 端

step1. 在專案資料夾建立一個新的檔案，輸入以下程式碼

step2. 執行 Server

$ node server.js

Server 就建立成功囉，會一直執行直到 ctrl + c 停止

step3. 打開瀏覽器輸入網址

http://localhost:5000：首頁，localhost 就是本機

左為內容，右為 condole.log 出來的 url

http://localhost:5000/category：會看到畫面有 category