[Network] 01. Http 協定、請求方式、HTTP Headers

2021/7/27 增加寶典-HTTP 請求頭、HTTP 響應頭、Post 和 Get 的區別

HTTP 是什麼

Hyper Text Transmission Protocal ( 超文件傳輸通訊協定)： 瀏覽器 與網站的溝通語言 HTTP，網路上以瀏覽器方式瀏覽資料，要遵循的就是 HTTP 通訊協定。
這是一個基於 TCP/IP 通信協議，是用來提供 World Wide Web 上的幾乎所有的文件和其它數據，統稱資源。這些資源可能是 HTML 文件，圖像文件，查詢結果，或其他任何東西。
HTTP 並非設計為傳輸協定，而是訊息 (message) 反映 Web 架構語意的轉移協定（Transfer Protocol）
瀏覽器是作為一個 HTTP 客戶端的作品，因為這就是所謂的 Web 服務器的 HTTP 服務器發送請求。 Web 服務器，然後發送回客戶端的響應。標準和 HTTP 服務器的默認端口上監聽是 80，但它可以改變到任何其他端口，如 8080 等
訪問過程：
跟人家請求資源時是不是要告訴人家：1
- 要 回傳什麼樣的資訊
- 要用什麼樣的方式跟我溝通
- 我的位址在哪裡,你要怎麼回傳訊息給我
- 我要用什麼樣的方式 呈現資訊

有三個 HTTP 重要應該知道的事情

HTTP 是無連接的：在發出請求時，客戶端與服務器斷開連接，並等待響應。服務器必須重新建立連接後，它處理請求。
HTTP 是獨立的媒體的：可以發送任何類型的數據，隻要通過 HTTP 的客戶端和服務器都知道如何處理的數據內容。決定如何處理內容的 MIME 規範。
HTTP 是無狀態的：HTTP 連接，這是一個直接結果。服務器和客戶端，只知道對方在一個請求。此後，每個忘記了其他。出於這個原因，無論是客戶端還是瀏覽器可以保留不同要求之間的跨網頁的信息。

HTTP 與 TCP/IP 其他各層的關係

HTTP 是架構於 TCP/IP 之上的 應用層
HTTP 透過可靠的傳輸/會話層 (TCP)，進行連線 (connection) 以交換訊息 (Exchange Message) (TCP的一種：WebSocket)
TCP 建立連線的程序，三向交握 (Three-way Handshake) ：
- （1.我送雞排給你囉 2.我收到了,我還想要跟你珍奶 2.好喔我送珍奶過去）
TCP連線成功後， 使用者代理 便將 請求訊息 轉移 (transfer) 至 Server 。

Clients 與 Server 溝通行為主從式架構

Client 端（瀏覽器）負責 request，而 Server 負責 response 。
由 HTTP 用戶端發起一個請求，建立一個到 伺服器指定埠（預設是80埠）的 TCP 連接。
在 HTTP 的通訊協定下，當使用者跟 Server（主機）聯絡時，為了網路安全性的考量，在通訊協定的限定下，Client 端只會傳部份限定的資資料給 Server，而這些資料大體上包含使用者 IP、使用者所使用的瀏覽器類別；而可從使用者的 IP 分別出這個使用者是來自那國家，使用何種瀏覽器（Header）。
HTTP 伺服器則在那個埠監聽用戶端的請求。一旦收到請求，伺服器 會向用戶端 返回一個狀態，比如 “HTTP/1.1 200 OK”，以及返回的內容，如請求的檔案、錯誤訊息、或者其它資訊。
HTTP/2 為優化 HTTP/1.2，允許在同一個連線中，做多次並發交換。

補充：response 的結果會由 javascript 來做前端的渲染

HTTP Headers

在發送請求時我們會看到 Headers 會帶上這些參數，那這些參數分別為什麼呢？

▍HTTP Response

Cache-Control（對應請求中的Cache-Control）

Cache-Control：private 默認為 private 響應只能夠作為私有的緩存，不能再用戶間共享
Cache-Control：public 瀏覽器和緩存服務器都可以緩存頁面信息。
Cache-Control：must-revalidate 對於客戶機的每次請求，代理服務器必須想服務器驗證緩存是否過時。
Cache-Control：no-cache 瀏覽器和緩存服務器都不應該緩存頁面信息。
Cache-Control：max-age=10
是通知瀏覽器 10 秒之內不要煩我，自己從緩衝區中刷新。
Cache-Control：no-store 請求和響應的信息都不應該被存儲在對方的磁盤系統中。

Content-Type

Content-Type：text/html;charset=UTF-8 告訴客戶端，資源文件的類型，還有字符編碼，客戶端通過 utf-8 對資源進行解碼，然後對資源進行 html 解析。通常我們會看到有些網站是亂碼的，往往就是服務器端沒有返回正確的編碼。

Content-Encoding

Content-Encoding：gzip 告訴客戶端，服務端發送的資源是採用 gzip 編碼的，客戶端看到這個信息後，應該採用 gzip 對資源進行解碼。

Date

Date：Tue, 03 Apr 2018 03:52:28 GMT 這個是服務端發送資源時的服務器時間，GMT 是格林尼治所在地的標準時間。http 協議中發送的時間都是 GMT 的，這主要是解決在互聯網上，不同時區在相互請求資源的時候，時間混亂問題。

Server

Server：Tengine/1.4.6
這個是服務器和相對應的版本，只是告訴客戶端服務器信息。

Transfer-Encoding

Transfer-Encoding：chunked 這個響應頭告訴客戶端，服務器發送的資源的方式是分塊發送的。一般分塊發送的資源都是服務器動態生成的，在發送時還不知道發送資源的大小，所以採用分塊發送，每一塊都是獨立的，獨立的塊都能標示自己的長度，最後一塊是0長度的，當客戶端讀到這個 0 長度的塊時，就可以確定資源已經傳輸完了。

Expires

Expires：Sun, 1 Jan 2000 01:00:00 GMT 這個響應頭也是跟緩存有關的，告訴客戶端在這個時間前，可以直接訪問緩存副本，很顯然這個值會存在問題，因為客戶端和服務器的時間不一定會都是相同的，如果時間不同就會導致問題。所以這個響應頭是沒有 Cache-Control：max-age=* 這個響應頭準確的，因為 max-age=date 中的 date 是個相對時間，不僅更好理解，也更準確。

Last-Modified

Last-Modified：Dec, 26 Dec 2015 17:30:00 GMT 所請求的對象的最後修改日期（按照 RFC 7231 中定義的“超文本傳輸協議日期”格式來表示）

Connection

Connection：keep-alive 這個字段作為回應客戶端的 Connection：keep-alive，告訴客戶端服務器的 tcp 連接也是一個長連接，客戶端可以繼續使用這個 tcp 連接發送 http 請求。

Etag

ETag：”737060cd8c284d8af7ad3082f209582d” 就是一個對象（比如 URL）的標誌值，就一個對象而言，比如一個 html 文件，如果被修改了，其 Etag 也會別修改，所以，ETag 的作用跟 Last-Modified 的作用差不多，主要供 WEB 服務器判斷一個對像是否改變了。比如前一次請求某個 html 文件時，獲得了其 ETag，當這次又請求這個文件時，瀏覽器就會把先前獲得 ETag 值發送給 WEB 服務器，然後WEB服務器會把這個 ETag 跟該文件的當前 ETag 進行對比，然後就知道這個文件有沒有改變了。

Refresh

Refresh：5; url=http://baidu.com
用於重定向，或者當一個新的資源被創建時。默認會在 5 秒後刷新重定向。

Access-Control-Allow-Origin

Access-Control-Allow-Origin：* 代表所有網站可以跨域資源共享，如果當前字段為 * 那麼 Access-Control-Allow-Credentials 就不能為 true
Access-Control-Allow-Origin：www.baidu.com 指定哪些網站可以跨域資源共享

Access-Control-Allow-Methods

Access-Control-Allow-Methods：GET,POST,PUT,DELETE
允許哪些方法來訪問

Access-Control-Allow-Credentials

Access-Control-Allow-Credentials：true 是否允許發送 cookie。默認情況下，Cookie 不包括在 CORS 請求之中。設為 true，即表示服務器明確許可，Cookie 可以包含在請求中，一起發給服務器。這個值也只能設為 true，如果服務器不要瀏覽器發送 Cookie，刪除該字段即可。如果access-control-allow-origin 為 *，當前字段就不能為 true

Content-Range

Content-Range：bytes 0-5/7877 指定整個實體中的一部分的插入位置，他也指示了整個實體的長度。在服務器向客戶返回一個部分響應，它必須描述響應覆蓋的範圍和整個實體長度。

▍HTTP Request

Accept

Accept：text/html
瀏覽器可以接受服務器回發的類型為 text/html。
Accept: */ * 代表瀏覽器可以處理所有類型（一般瀏覽器發給服務器都是發這個）

Accept-Encoding

Accept-Encoding：gzip, deflate 瀏覽器申明自己接收的編碼方法，通常指定壓縮方法，是否支持壓縮，支持什麼壓縮方法（gzip，deflate）

Accept-Language

Accept-Language：zh-CN,zh;q=0.9 瀏覽器申明自己接收的語言

Connection

Connection：keep-alive
當一個網頁打開完成後，客戶端和服務器之間用於傳輸 HTTP 數據的 TCP 連接不會關閉，如果客戶端再次訪問這個服務器上的網頁，會繼續使用這一條已經建立的連接。
Connection: close 代表一個 Request 完成後，客戶端和服務器之間用於傳輸HTTP 數據的 TCP 連接會關閉，當客戶端再次發送 Request，需要重新建立 TCP 連接

Host（發送請求時，該報頭域是必需的）

Host：www.baidu.com 請求報頭域主要用於指定被請求資源的 Internet 主機和端口號，它通常從 HTTP URL 中提取出來的

Referer

Referer：https://www.baidu.com/?tn=62095104_8_oem_dg 當瀏覽器向web 服務器發送請求的時候，一般會帶上 Referer，告訴服務器我是從哪個頁面鏈接過來的，服務器籍此可以獲得一些信息用於處理。

User-Agent

User-Agent：Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36 告訴 HTTP 服務器，客戶端使用的操作系統和瀏覽器的名稱和版本。

Cache-Control

Cache-Control：private 默認為private響應只能夠作為私有的緩存，不能再用戶間共享
Cache-Control：public 響應會被緩存，並且在多用戶間共享。正常情況, 如果要求HTTP認證,響應會自動設置為private.
Cache-Control：must-revalidate 響應在特定條件下會被重用，以滿足接下來的請求，但是它必須到服務器端去驗證它是不是仍然是最新的。
Cache-Control：no-cache
響應不會被緩存,而是實時向服務器端請求資源。
Cache-Control：max-age=10 設置緩存最大的有效時間，但是這個參數定義的是時間大小（比如：60）而不是確定的時間點。單位是[秒seconds]。
Cache-Control：no-store 在任何條件下，響應都不會被緩存，並且不會被寫入到客戶端的磁盤裡，這也是基於安全考慮的某些敏感的響應才會使用這個。

Cookie

Cookie 是用來存儲一些用戶信息以便讓服務器辨別用戶身份的（大多數需要登錄的網站上面會比較常見），比如 cookie 會存儲一些用戶的用戶名和密碼，當用戶登錄後就會在客戶端產生一個 cookie 來存儲相關信息，這樣瀏覽器通過讀取 cookie 的信息去服務器上驗證並通過後會判定你是合法用戶，從而允許查看相應網頁。當然 cookie 裡面的數據不僅僅是上述範圍，還有很多信息可以存儲是 cookie 裡面，比如 sessionid 等。

Range（用於斷點續傳）

Range：bytes=0-5 指定第一個字節的位置和最後一個字節的位置。用於告訴服務器自己想取對象的哪部分。

HTTP 請求方法都有什麼？

GET 方法請求展示指定資源。使用 GET 的請求只應用於取得資料。
HEAD 方法請求與 GET 方法相同的回應，但它沒有回應主體（response body）。
POST 方法用於提交指定資源的實體，通常會改變伺服器的狀態或副作用（side effect）。
PUT 方法會取代指定資源所酬載請求（request payload）的所有表現。
DELETE 方法會刪除指定資源.
CONNECT 方法會和指定資源標明的伺服器之間，建立隧道（tunnel）。
OPTIONS 方法描述指定資源的溝通方法（communication option）。
TRACE 方法會與指定資源標明的伺服器之間，執行迴路返回測試（loop-back test）。
PATCH 方法套用指定資源的部份修改。

請求方法

JavaScript

用 JavaScript 的 XHR、jQuery、Fetch API

HTML 表單

Post 和 Get 的區別：

GET	POST
從服務器上獲取數據	向服務器傳送數據
在客戶端，GET 方式在通過 URL 提交數據，數據在 URL 中可以看到	POST 方式，數據放置在 HTML——HEADER 內提交
服務器端用 Request.QueryString 獲取變量的值	服務器端用 Request.Form 獲取提交的數據

GET：
- 是透過 URL 傳遞 Query String 參數
  - 有長度限制
  - 不適合用來傳遞敏感參數
  - 不會去修改到資料相對安全。
- 鍵值對 (key-value) 的方式，置於 URI 的查詢 (query)
```
  https://echo.paw.cloud:443/hello/world?age=24&gender=female
```
- 標籤的 method 屬性中設置 "get" ```html
Search:
```
POST：1
- 是透過 HTTP Request 向伺服器 傳遞資料 被包含在 請求 body 中，請求伺服器進行處理。
  - 可能會建立新的資源或修改現有資源（例如提交表單或者上傳檔案)，網址不會改變
  - 可傳遞的數據較 get 大，可傳遞的類型較多（json等）
  - 請求 body 的類型：
- 範例：上傳檔案 enctype=”multipart/form-data” ```html
```
    
  - 範例：表單 (form)
  ```html
  <form action="https://echo.paw.cloud" method="post">
  Search: <input type="search" name="search"> <input type="submit" value="Submit">
  </form>
```