小滴課堂-學習筆記：最接近使用者的協定-Http協定

 願景："讓程式設計不再難學，讓技術與生活更加有趣"

更多架構課程請通路 xdclass.net

第1集 http協定之核心面試知識點

簡介：http狀态碼和method知識點考查

• 考點：是否掌握Http基礎知識，遵循開發規範
• 難度：【***】
• 常見的Http Method有哪些，使用場景分别是？

http1.0定義了三種：
​
    GET: 向伺服器擷取資源，比如常見的查詢請求
    POST: 向伺服器送出資料而發送的請求
    Head: 和get類似，傳回的響應中沒有具體的内容，用于擷取報頭
    
http1.1定義了六種
​
    PUT：一般是用于更新請求，比如更新個人資訊、商品資訊全量更新
    PATCH：PUT 方法的補充,更新指定資源的部分資料
    DELETE：用于删除指定的資源
    OPTIONS: 擷取伺服器支援的HTTP請求方法,伺服器性能、跨域檢查等
    CONNECT: 方法的作用就是把伺服器作為跳闆，讓伺服器代替使用者去通路其它網頁，之後把資料原原本本的傳回給使用者，網頁開發基本不用這個方法，如果是http代理就會使用這個，讓伺服器代理使用者去通路其他網頁，類似中介
    TRACE：回顯伺服器收到的請求，主要用于測試或診斷
           

• 常見http狀态碼解析

浏覽器向伺服器請求時，服務端響應的消息頭裡面有狀态碼，表示請求結果的狀态
​
分類
1XX: 收到請求，需要請求者繼續執行操作，比較少用
​
2XX: 請求成功，常用的 200
​
3XX: 重定向，浏覽器在拿到伺服器傳回的這個狀态碼後會自動跳轉到一個新的URL位址，這個位址可以從響應的Location首部中擷取；
​
好處：網站改版、域名遷移等，多個域名指向同個主站導流
必須記住： 301：永久性跳轉，比如域名過期，換個域名 302：臨時性跳轉
​
4XX: 客服端出錯，請求包含文法錯誤或者無法完成請求
必須記住： 
  400: 請求出錯，比如文法協定 
  403: 沒權限通路 
  404: 找不到這個路徑對應的接口或者檔案 
  405: 不允許此方法進行送出，Method not allowed，比如接口一定要POST方式，而你是用了GET
​
5XX: 服務端出錯，伺服器在處理請求的過程中發生了錯誤
必須記住： 
    500: 伺服器内部報錯了，完成不了這次請求 
    503: 伺服器當機
           

第2集 http協定無狀态解決方法 Cookie和Session

簡介：單機情況下 http無狀态解決方案，cookie和session

• 考點：是否掌握cookie和session知識點
• 難度：【** *】
• 說下Cookie和Session的差別和聯系

cookie資料儲存在用戶端，session資料儲存在服務端
cookie不是很安全，容易洩露，不能直接明文存儲資訊
Cookie大小和數量存儲有限制
           

• 你們公司C端業務登入的是怎樣做的（業務量大，叢集部署）

部分業務是采用redis替代本身的tomcat單機session (業務需要高度可控)
​
還有其他業務是使用JSON Web token (C端普通業務)
           

第3集 http協定之分布式業務無狀态解決方案 JWT

簡介：分布式業務場景的常見登入解決方案JWT

• 考點：是否知道JWT
• 難度：【** **】
• 你們公司是用JWT做叢集的登入解決是不是，能否介紹下JWT
  • JWT 是一個開放标準，它定義了一種用于簡潔，自包含的用于通信雙方之間以 JSON 對象的形式安全傳遞資訊的方法。 可以使用 HMAC 算法或者是 RSA 的公鑰密鑰對進行簽名
  • JWT格式組成 頭部、負載、簽名
    • header+payload+signature
      • 頭部：主要是描述簽名算法
      • 負載：主要描述是加密對象的資訊，如使用者的id等，也可以加些規範裡面的東西，如iss簽發者，exp 過期時間，sub 面向的使用者
      • 簽名：主要是把前面兩部分進行加密，防止别人拿到token進行base解密後篡改token
  • 簡單來說: 就是通過一定規範來生成token，然後可以通過解密算法逆向解密token，這樣就可以擷取使用者資訊

        {
                id:888,
                name:'二當家小D',
                expire:10000
            }
            
            funtion 加密(object, appsecret){
                xxxx
                return base64( token);
            }
​
            function 解密(token ,appsecret){
​
                xxxx
                //成功傳回true,失敗傳回false
            }
           

• 為啥使用這個呢，有什麼優缺點
  • 優點
    • 生産的token可以包含基本資訊，比如id、使用者昵稱、頭像等資訊，避免再次查庫
    • 存儲在用戶端，不占用服務端的記憶體資源，使用加解密的方式進行校驗，在分布式業務中能較好的提高性能和節省空間
  • 缺點
    • token是經過base64編碼，是以可以解碼，是以token加密前的對象不應該包含敏感資訊，如使用者權限，密碼等
    • 如果沒有服務端存儲，則不能做登入失效處理，除非服務端改秘鑰

• 生成的token，在用戶端或者浏覽器是怎麼存儲的
  • 可以存儲在cookie，localstorage和sessionStorage裡面

第4集 浏覽器輸入url按回車背後經曆了哪些

簡介：浏覽器網絡請求鍊路

• 考點：是否掌握http請求産生到響應的鍊路
• 難度：【** **】

• 說下常用浏覽器輸入一個url到使用者看到結果，中間經過哪些流程

    1、浏覽器輸入url, 解析url位址是否合法
  ​
  　　2、浏覽器檢查是否有緩存, 如果有直接顯示。如果沒有跳到第三步。
  ​
  　　3、在發送http請求前，需要域名解析（DNS解析），解析擷取對應過的ip位址。
  ​
  　　4、浏覽器向伺服器發起tcp連結，完成tcp三次握手
  ​
  　　5、握手成功後，浏覽器向伺服器發送http請求
  ​
  　　6、伺服器收到處理的請求，将資料傳回至浏覽器
  ​
  　　7、浏覽器收到http響應。
  ​
  　　8、浏覽器解析響應。如果響應可以緩存，則存入緩存
  ​
  　　9、浏覽器進行頁面渲染
             

第5集 浏覽器同源政策和跨域掌握了嗎？

簡介：什麼是浏覽器的同源政策和跨域知識點

• 考點：同源政策和跨域知識點
• 難度：【** **】
• 你是否知道什麼是浏覽器同源政策

  同源政策（Same origin policy）是一種約定，它是浏覽器最核心也最基本的安全功能，如果缺少了同源政策，則浏覽器的正常功能可能都會受到影響。
  ​
  由Netscape提出的一個著名的安全政策。
  ​
  當一個浏覽器的兩個tab頁中分别打開來 百度和谷歌的頁面
  ​
  當浏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬于哪個頁面的，
  ​
  即檢查是否同源，隻有和百度同源的腳本才會被執行。
  ​
  如果非同源，那麼在請求資料時，浏覽器會在控制台中報一個異常，提示拒絕通路。
  ​
  同源政策是浏覽器的行為，是為了保護本地資料不被JavaScript代碼擷取回來的資料污染，是以攔截的是用戶端發
  ​
  出的請求回來的資料接收，即請求發送了，伺服器響應了，但是無法被浏覽器接收
             

• 為什麼會出現跨域，有什麼常見的解決方案
  • 跨域：浏覽器同源政策 1995年，同源政策由 Netscape 公司引入浏覽器。目前，所有浏覽器都實行這個政策。 最初，它的含義是指，A網頁設定的 Cookie，B網頁不能打開，除非這兩個網頁"同源"。所謂"同源"指的是"三個相同"

    協定相同  http https
    域名相同  www.xdclass.net
    端口相同  80  81
    ​
    一句話：浏覽器從一個域名的網頁去請求另一個域名的資源時，域名、端口、協定任一不同，都是跨域
    ​
    浏覽器控制台跨域提示：
    No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
               

• 解決方法
  • JSONP
  • 頁面這層再包裝一層服務，目前最多就是nodejs
  • Http響應頭配置允許跨域
    • nginx代理伺服器
    • 後端程式代碼配置

      程式代碼中處理 SpringBoot 通過攔截器配置
           
      //表示接受任意域名的請求,也可以指定域名
      response.setHeader("Access-Control-Allow-Origin", request.getHeader("origin"));
           
      //該字段可選，是個布爾值，表示是否可以攜帶cookie
      response.setHeader("Access-Control-Allow-Credentials", "true");
           
      response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS");
           
      response.setHeader("Access-Control-Allow-Headers", "*");