上次被後端問了關於 Header 的問題，發現我對這 HTTP 的知識薄弱，實在慚愧🥺，馬上上網科普一下，
好在找到了偷米騎巴哥大大分享的直播影片，以下是從影片內容裡整理的資料，筆記記錄一下

HTTP 是通訊協定，電腦與電腦溝通的語言

前端為何要了解 HTTP

🔸 前端經常需要與後端合作
🔸 釐清責任歸屬
🔸 了解瀏覽器運作原理

什麼是 HTTP Header

🔸 傳送內容以外的資訊
內容是什麼格式? 內容有多大? 內容多久後過期?…等等
內容為 HTML、圖片、字型、CSS、JavaScript、JSON…等等

🔸 Header 一定在內容前面

🔸 細分 Genaral Header、Request/Response Header、Entity Header

如何將資料傳送到對方電腦

TCP/IP 協定(Transmission Control Protocol / Internet Protocol)
網際網路協議套組，是一個網路通訊模型，以及一整個網路傳輸協定家族，為網際網路的基礎通訊架構。

TCP/IP 包含了四種表現層，常被視為是簡化的七層OSI模型

資料傳遞的過程中，每一層都會有一個 header，傳送後，會再一層一層慢慢拆解 header

TCP：會切割封包，接收時確認是不是資料都有收到
IP：確認資料封包要送去哪個 IP 位址，電腦和網路設備不認得網址只認得 IP
DNS Server：把網址轉換成 IP 位址

瀏覽器會傳網址給 DNS 伺服器，透過 DNS 轉成 IP 回來，再用 TCP/IP 傳送 IP，找到伺服器，再傳遞 Response 回來

HTTP Header 種類

🔸 Request Header 客戶端要求伺服器時傳送
🔸 Response Header 伺服器回應客戶端時傳送
有發送請求，就必會有回應 (只要伺服器正常運作)

常見的 Request Header

🔸 Host
瀏覽器存取的Host名稱，因為一個IP可以綁訂多個不同Domain，此時就需要Host知道要對應到哪個伺服器

🔸 User-Agent
瀏覽器名稱和版本&作業系統名稱和版本

🔸 Accept
瀏覽器接受的類型，ex: text/plain、text/html

🔸 Accept-Language
瀏覽器接受的語言，q值表示語言優先的權重

🔸 Accept-Encoding
瀏覽器支援的壓縮格式，大部分流覽器都支援gzip壓縮，伺服器則會壓縮內容後傳給瀏覽器，節省下載時間和頻寬

🔸 Date
傳送瀏覽器時間給伺服器，讓伺服器知道瀏覽器目前的時間

🔸 Expect
要求伺服器回應特定結果，期望可以給想要的結果，但最終還是由伺服器決定，ex: 100-continue

🔸 If-Modified-Since
瀏覽器cache檔案，下一次request則會發送此header，伺服器使用這個時間來判斷是否修改過檔案，沒有則會回傳304
If-Modified-Since (時間)
If-None-Match (Hash Code)

🔸 Cookie
把瀏覽器的cookie傳給伺服器，每一個request都會包含cookie

🔸 Referer
瀏覽器前一個瀏覽頁面的網址，可用此header判斷request的來源，但是不可靠，因為可能被遭到串改
(原應為referrer因為拼錯了只好將錯就錯)

🔸 Connection
可以設定Keep-Alive保持連線時間，減少重新連接TCP連線次數，提高傳輸效率

🔸 Content-Type
指傳送內容的格式，常見格式為：
表單: application/x-www-form-urlencoded
檔案上傳: multipart/form-data; boundary=–xxx
純文字內容: text/plain

🔸 Authorization
HTTP 連線的身分驗證(帳號、密碼)

🔸 Upgrade
升級到另外一個協定，ex: websocket

常見的 Response Header

🔸 Etag
產生檔案的Hash Code給瀏覽器，下一次瀏覽器可以傳送If-None-Match給伺服器判斷是否有修改過檔案，沒有則回傳304並且不會包含content

🔸 Last-Modified
回傳檔案最後修改的時間，下一次瀏覽器可以傳送If-Modified-Since給伺服器判斷是否有修改過檔案，沒有則回傳304並且不會包含content

🔸 Catch-Control
快取檔案的策略，max-age 則表示該檔案有效的cache秒數，no-cache 則表示不使用快取

🔸 Content-Type
回傳content的mime類型，當content-type設為text/html和text/plain可同時設定charset文字編碼格式，若無content-type瀏覽器自動判斷

🔸 Content-Disposition
讓瀏覽器可以打開下載視窗並且指定檔案名稱，例如：Content-Disposition: attachment; filename=”download.zip”

🔸 Content-length
取得下載傳送內容的大小，讓瀏覽器可以判斷下載的進度

🔸 Date
傳送伺服器時間給瀏覽器，讓瀏覽器知道伺服器目前的時間

🔸 Location
當狀態碼為301或302時，瀏覽器則會重新導向到Location這個位置

🔸 Set-Cookie
設定瀏覽器的cookie，當瀏覽器收到此header則會建立cookie在瀏覽器中

🔸 Content-Encoding
回傳內容的壓縮格式，讓瀏覽器知道該如何解壓縮內容

🔸 Access-Control-Allow-Origin
准許跨網域存取的Domain，全部網域使用*字號表示
script和link標籤不再此限

🔸 X-Frame-Options
否能夠在 frame、iframe 以及 object 載入，網站可以利用 X-Frame-Options 來確保本身內容不會遭惡意嵌入道其他網站、避免 clickjacking 攻擊
SAMEORIGIN 只限相同域名，跨域無法載入

🔸 Upgrade
確認升級到新的協定，此時connection也會同時回應Upgrade
ex: Connection: Upgrade
Upgrade: websocket

WebSocket (雙向溝通)

🔸 Header 傳送 Upgrade: websocket
🔸 伺服器回應 101 切換協定
🔸 建立一個保持連線的狀態，連線會更即時、更快速
🔸 建立雙向的通道，可任意的作資料傳遞
🔸 即不需要送一個 request 即回一個 response，可一直丟
🔸 伺服器能承受的連線數量要很高，通常會作 load balance

參考文獻:

偷米騎巴哥HTTP header & Status code
HTTP Header & Status Code 心得

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Lala Code

認識 HTTP Header