Web 前後端交互原理全解析：HTTP 請求回應、AJAX、Fetch、WebSocket

核心流程

1. 瀏覽器解析 URL → DNS 解析 IP → 建立 TCP 連線 (HTTP/1.1 keep-alive / HTTP/2 多路復用)。
2. 發送 HTTP Request：
   GET /api/users HTTP/1.1\r\nHost: example.com\r\nCookie: session=abc\r\n\r\n
3. 伺服器處理：路由 → 控制器 → 服務層 → 資料庫 → 序列化 (JSON/XML)。
4. 回傳 HTTP Response：
   HTTP/1.1 200 OK\r\nContent-Type: application/json\r\n\r\n{"id":1,"name":"Tom"}
5. 前端接收處理：解析 JSON → 更新 DOM / 狀態管理 (Vuex/Redux) → 重渲染。

主要交互模式

關鍵技術細節

• 同源策略 (SOP)：協議/域名/埠任一不同即跨域，需 CORS 標頭 (`Access-Control-Allow-Origin`)。
• CSRF 防護：雙重提交 Cookie、SameSite Cookie、驗證 Token。
• JWT 無狀態認證：Access Token + Refresh Token 機制。
• RESTful 設計：資源導向、HTTP 動詞語意、狀態碼規範。

參考資源

• Web 前後台交互詳解
• 前後端分離架構演進
• HTTP 協議深度解析