type
status
date
slug
summary
tags
category
icon
password
什麼是 HTTP、HTTPS
什麼是 HTTP
- HyperText Transfer Protocol 超文本傳輸協定
- 在網絡上和電腦間的一種工作方式
常見的網路協定
- TCP/IP
- UDP
- FTP
- SSH
關於瀏覽器運作原理
一開始你在瀏覽器地址列輸入一串網址，Browser Rrocess 裡的 UI 線程會補捉到你輸入的網址，接著開啟一個網路線程請求 DNS 進行域名解析，解析完後聯絡服務器，服務器就會返回一串數據。如果你輸入的不是網址而是一串關鍵詞，瀏覽器就知道你要的是搜索，就會使用默認配置的搜索引擎進行查詢。
當瀏覽器獲取到數據後，會通過 SafeBrowsing 檢查站點，如果是就會跳出頁面安全提示，你也可執意繼續訪問。如果確定訪問，就會把數據交給 UI 線程告訴他準備好了，接著就會通過 IPC 通道將數據傳遞給 Renderer Process。
接收到的數據也就是 HTML，要渲染成 DOM 數據結構，首先要經過 Tokeniser 將內容解析成多個標記，根據識別後的標記構造以 document 對象為根節點的 DOM Tree，途中會進行多次修改與添加元素。
那你的 HTML 代碼中往往會引入一些額外資源，比如圖片、CSS、JS 腳本之類的，像圖片、CSS 就要從網絡中下載或從緩存中加載，這些資源不會阻塞 HTML 的解析，因為它們不會影響到 DOM 的生成。但當解析過程中遇到 Script 標籤，就會停止 HTML 解析流程，反而會去解析加載 JS 。為甚麼先加載 JS 呢？因為 JS 裏頭可能會有像
document.write() 之類的方法修改 HTML 結構，這樣的話之前的解析就沒意義了。這就是為甚麼說要把 script 標籤放在合適的位置，或使用 async 或 defer 屬性來異步處理。
解析完 DOM Tree 後主線程要確定每個 DOM 節點的計算樣式，即使你沒有提供 CSS 樣式，瀏覽器也會有自己默認的樣式表。像是 h1 字體大於 h2 或 div 標籤默認樣式就是
display: block; 之類的。
確認完樣式就要確認 DOM 的位置，例如該節點的座標或是該節點的位置，這階段就是 Layout 布局。
主線程通過遍歷和計算好的樣式生成 Layout Tree ，節點上都記錄了 x, y 座標和邊框尺寸。
這邊有個小重點是 DOM Tree 和 Layout Tree 並不是一一對應的，你設置
display: none; 的節點不會出現在 Layout Tree 上，相對你的偽元素節點會就出現在 Layout Tree 上，不會出現在 DOM Tree 裡。
這還不夠，你還要知道甚麼是順序繪製節點。舉例來說，
z-index 屬性會影響節點繪製的層級關係，所以主線程會遍歷 Layout Tree 生程繪製列表，該表記錄了繪製順序。
接著主線程才遍歷一次 Layout Tree 生成 Layer Tree，將這些信息傳遞給合成器線程。
合成器線程將每個圖層進行柵格化，將圖層切分成多個圖塊。合成器線程再收集這些稱為 draw quads 的圖塊信息，生成合成器幀。
這些合成器幀再通過 IPC 傳送回給瀏覽器進程，再送給 GPU ，渲染到你的屏幕上。大功告成~!
HTTP Method
- GET 獲取數據
- POST 上傳數據
- PUT 覆蓋數據 (不可局部更新)
- PATCH 更新數據 (可局部更新)
- DELETE 刪除數據
Request
Response
Status Code
- 1XX：Informational (接收到 Reaquest 了 需要繼續處裡)
- 2XX：Successful
- 3XX：Redirects
- 4XX：Client Errors
- 5XX：Server Errors
HTTP 不安全
甚麼是 HTTPS
- HyperText Transfer Protocol Secure 超文本傳輸安全協定
- SSL/TSL 加密
在客戶端和伺服器正常通訊之前，會有一個握手過程。 這裡以瀏覽器存取 HTTPS 網站，且 HTTPS 網站伺服器提供單向認證為例來描述握手過程。 （注意，握手過程根據 Key 交換演算法的不同而不同，例如 RSA、Diffie Hellman，這裡以 RSA 為例）
- 首先瀏覽器發起 clientHello 訊息，包含支援的 TLS 版本、加密演算法集(Cipher Suite)以及隨機數
- 伺服器發送 ServerHello 訊息，其中包含所選的雙方共同支援的 TLS 版本，加密演算法集和另一個隨機數，然後再發送 Certificate 訊息，附加伺服器的憑證，最後發送 ServerHelloDone 訊息
- 瀏覽器接收訊息後驗證伺服器憑證是否為受信任的憑證機構(CA)簽發的，是否是真實的伺服器（認證），之後使用憑證隨附的公鑰產生 premaster secret，作為 ClientKeyExchange 訊息體傳送給伺服器
- 伺服器收到後使用私鑰解密 premaster secret
- 隨後瀏覽器和伺服器使用 premaster secret 和先前產生的伺服器+瀏覽器全部隨機數產生相同的 master key，用於加密和解密後續所有的通信
- 瀏覽器發送 ChangeCipherSpec 訊息然後發送使用 master key 加密的 finished 訊息
- 伺服器接收並驗證，然後同樣給瀏覽器發送 ChangeCipherSpec 訊息和使用 master key 加密的 finished 訊息，瀏覽器接收並驗證
- 握手完成
JavaScript 如何 Fetch Data
Apifox
範例
Axios
- 使用 Axios 發送 GET 請求的例子：
- 使用 Fetch 發送 GET 請求的例子：
- 使用 Axios 取消請求的例子：
跨域請求
跨域請求（Cross-Origin Request）指的是在網頁的域名、協議或端口號不同的情況下，從一個網頁的環境中向另一個網頁的服務器發送HTTP請求。
瀏覽器實施了同源策略（Same-Origin Policy），該策略限制了網頁中的JavaScript只能訪問相同源（相同的協議、域名和端口）的資源，以確保安全性。當JavaScript代碼試圖向不同源的服務器發送HTTP請求時，瀏覽器會阻止該請求，這就是跨域請求。
那如何處理跨域請求呢？常見的跨域請求方法包括跨域資源共享（CORS）、JSONP（JSON with Padding）、代理服務器等。
- 配置後端
- 配置前端
- 寫中間件
vite 配置代理：
使用 Fetch 處理跨域請求的例子：
- 作者:墨綠B.G.
- 連結:https://www.blackishgreen.link//article/http-fetch
- 著作權:本文採用 CC BY-NC-SA 4.0 許可協議，轉載請註明出處。