iT邦幫忙

4

HTTP Header & Status Code 心得

  • 分享至 

  • xImage
  •  

整理內容來自 偷米騎巴哥

Why Learn?

  • 前後端經常合作,必須聽懂他們的語言
  • 釐清責任歸屬
  • 了解瀏覽器運作原理

HTTPS

HTTP Header (傳送內容以外的資訊)

  • 當發送 GET/POST 請求後,除了資料內容之外,還需附上表頭來紀錄各種資料/設定
  • HTTP Header Wiki
  • 一定放在內容前面
  • 內容格式 (圖檔、文字)
  • 內容大小 可用來推估下載要耗多久時間
  • 多久過期 快取機制

HTTP Body (資料內容)

  • 存放內容: HTML,JS,圖檔...等
  • 內容不一定是HTML,但HTML一定是內容之一

如何查看 Header

  • Chrome DevTools / Network Tab
  • 重新整理後,每個檔案皆為請求
  • 右側有 Headers / Preview / Response 可查看
  • Preview 會以瀏覽器能解析的方式呈現
  • Response 則將內容以純文字呈現
  • Headers view source 可看更多細節

Fiddler (監控HTTP工具)

GET / POST

  • GET: 有限制大小 (明信片)
  • GET 會將要傳遞的參數寫在網址上

Ex: url/?h1=zh-TW&pli=1 (用&連結不同參數)

  • POST: 會將要傳的參數寫在 Content (包裹)

HTTP Header 種類

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

共通 Header 設定

  • Request & Response Header 都會有的共通設定
  • Request Method : GET/POST
  • Status Code: 狀態碼
  • Date: 瀏覽器/伺服器 當前時間
  • Upgrade: 升級到另外一個協定 (Ex: websocket)
  • Content-Type: 指傳送內容的格式 (常見格式如下)
  • Content-length: 傳送內容大小 (可用於計算下載耗時/進度)
  • Content-Encoding: 內容壓縮格式 (通常為 gzip)
    // 一般表單欄位
    application/x-www-form-urlencoded 
    // 檔案上傳
    multipart/form-data; boundary=--xxx 
    // JSON資料
    application/json 
    // 純文字
    text/plain 

WebSocket (雙向溝通)

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

Request Header

  • Request URL 請求資源的位置

  • Host: 瀏覽器存取的 Host 名稱 (不可省)
    因為一個IP可以綁定多個 Domain,必須知道要對應的伺服器。

  • User-Agent: 瀏覽器名版本 & 作業系統名版本

  • Connection: keep-alive (保持連線不斷掉)
    建立&關閉連線相當耗時,保持連線,減少重新連接TCP次數,可以有效提高傳輸效率。

  • If-Modified-Since: 快取時間 (用來判斷是否要更新內容)

  • Cookie (每次請求都會發送瀏覽器的cookie,下詳)

  • Authorization HTTP連線的身分驗證

  • Referer: 紀錄瀏覽器前一個頁面的網址
    可用於行銷,來判斷從哪裡點入的 (不可靠,可被串改)

    // Accept 類可用 q=0.5 來配置優先取得的權重
    Accept: text/html (能接受檔案類型)
    Accept-Language: zh-TW (能接受的語言)
    Accept-Encoding: gzip (能支援的壓縮格式)

Cookie

  • 用來紀錄狀態 (Ex:登入)
  • 每一個 request 都會傳送一份 cookie 回伺服器 (即使傳圖片也會傳)
  • 因此 cookie 不要設太大,不然會造成資源浪費
  • LocalStorage 則不會被傳送到伺服器去,用來放不需要回傳給伺服器的資料

Response Header

  • Etag: 產生檔案的 Hash Code,紀錄檔案是否變更
  • Last-Modified: 回傳檔案修改的時間 (原理同 If-None-Match)
    // Etag 會做的事
    要求瀏覽器請求時回傳 If-None-Match 的 Header 
    If-None-Match 會根據 Hash Code 判斷檔案是否有更動
    沒有改變: 回傳304(叫他使用快取的內容),回傳不包含 content
    有改變:   回傳200,給予新的內容
  • Catch-Control: 快取檔案的策略
    max-age 設定該檔案有效的快取秒數,過期則要求新的
    no-cache 不使用快取
  • Location: 當狀態碼是301或302時,瀏覽器重新導向的目標位置
  • Content-Disposiiotn: 讓瀏覽器可以打開下載視窗並且指定檔案名稱
 Content-Disposiiotn:attachment; filename="test.zip" 
  • Set-Cookie: 把 cookie 設定在瀏覽器上面
    當下一次request的時候,會將 cookie header送回 server端
  • X-Frame-Options 可以避免自己的網頁被放在別人的iframe裏面 (需同網域才可放)
  • Access-Control-Allow-Origin (允許跨域存取的網域名稱)
    全部的網域使用 * 代表
    script & link 不再此限 (因此JSON可實現跨域存取)

同源政策

  • 代表 無法從 A網站 去存取 B網站的 JSON檔
  • 解1: 後端設定 Access-Control-Allow-Origin Header (推薦)
  • 解2: JSONP (將 JSON 轉換成 JavaScript) (較少用)

HTTP 1.1 快取機制


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言