[{"data":1,"prerenderedAt":968},["ShallowReactive",2],{"navigation_docs":3,"-web-dev-network-http-request-structure":352,"-web-dev-network-http-request-structure-surround":963},[4,54,83,116,125,161,179,200],{"title":5,"path":6,"stem":7,"children":8},"Ai","/ai","ai",[9,12,42,46,50],{"title":10,"path":6,"stem":11},"AI 技術探索","ai/index",{"title":13,"path":14,"stem":15,"children":16,"page":41},"Rag","/ai/rag","ai/RAG",[17,21,25,29,33,37],{"title":18,"path":19,"stem":20},"BM25 演算法深入解析：從 TF-IDF 到現代搜尋引擎的核心技術","/ai/rag/bm25-deep-dive-from-tf-idf-to-rag","ai/RAG/bm25-deep-dive-from-tf-idf-to-rag",{"title":22,"path":23,"stem":24},"Dense Retrieval（向量檢索）深入解析","/ai/rag/dense-retrieval-deep-dive","ai/RAG/dense-retrieval-deep-dive",{"title":26,"path":27,"stem":28},"RAG（Retrieval-Augmented Generation）原理與實作入門","/ai/rag/rag-intro-principles-and-implementation","ai/RAG/rag-intro-principles-and-implementation",{"title":30,"path":31,"stem":32},"RAG Retrieval Strategy 深入解析","/ai/rag/rag-retrieval-strategy-deep-dive","ai/RAG/rag-retrieval-strategy-deep-dive",{"title":34,"path":35,"stem":36},"Reciprocal Rank Fusion（RRF）教學：打造更穩定的檢索融合策略","/ai/rag/rrf-reciprocal-rank-fusion-guide","ai/RAG/rrf-reciprocal-rank-fusion-guide",{"title":38,"path":39,"stem":40},"TF-IDF（Term Frequency–Inverse Document Frequency）深入解析","/ai/rag/tf-idf-deep-dive","ai/RAG/tf-idf-deep-dive",false,{"title":43,"path":44,"stem":45},"Docus AI 功能完整實作指南","/ai/docus-ai-implementation","ai/docus-ai-implementation",{"title":47,"path":48,"stem":49},"llms.txt 是什麼？在 Nuxt 中控制 AI 與搜尋引擎爬蟲的新方式","/ai/llms-txt","ai/llms-txt",{"title":51,"path":52,"stem":53},"MCP（Model Context Protocol）是什麼？用「AI 的 USB-C」理解模型如何安全連接工具與資料","/ai/mcp_concept","ai/mcp_concept",{"title":55,"path":56,"stem":57,"children":58,"page":41},"Data Analysis","/data-analysis","data-analysis",[59,63,67,71,75,79],{"title":60,"path":61,"stem":62},"Exploratory Data Analysis（EDA）資料探索分析入門","/data-analysis/exploratory-data-analysis-eda","data-analysis/exploratory-data-analysis-eda",{"title":64,"path":65,"stem":66},"PR-AUC 深入解析：不平衡分類問題的重要評估指標","/data-analysis/pr-auc-for-imbalanced-classification","data-analysis/pr-auc-for-imbalanced-classification",{"title":68,"path":69,"stem":70},"ROC-AUC 深入解析：理解分類模型的判斷能力","/data-analysis/roc-auc-complete-guide","data-analysis/roc-auc-complete-guide",{"title":72,"path":73,"stem":74},"SHAP（SHapley Additive exPlanations）模型解釋方法深入解析","/data-analysis/shap-model-interpretation-complete-guide","data-analysis/shap-model-interpretation-complete-guide",{"title":76,"path":77,"stem":78},"Social Network Analysis（SNA）深入解析","/data-analysis/social-network-analysis-sna","data-analysis/social-network-analysis-sna",{"title":80,"path":81,"stem":82},"Time-based Split：為什麼時間序列資料不能使用 Random Split？","/data-analysis/time-based-split-vs-random-split","data-analysis/time-based-split-vs-random-split",{"title":84,"path":85,"stem":86,"children":87,"page":41},"MachineLearning","/machine_learning","machine_learning",[88,92,96,100,104,108,112],{"title":89,"path":90,"stem":91},"Confusion Matrix（混淆矩陣）完整解析","/machine_learning/confusion-matrix","machine_learning/confusion-matrix",{"title":93,"path":94,"stem":95},"Decision Tree 模型完整教學：從原理到 Python 實作","/machine_learning/decision-tree-complete-guide","machine_learning/decision-tree-complete-guide",{"title":97,"path":98,"stem":99},"為什麼 Decision Tree 在 Tabular Data 上常常勝過 Deep Learning？","/machine_learning/decision-tree-vs-deep-learning-on-tabular-data","machine_learning/decision-tree-vs-deep-learning-on-tabular-data",{"title":101,"path":102,"stem":103},"LightGBM 模型入門：理解高效能的 Gradient Boosting 演算法","/machine_learning/lightgbm-intro-for-tabular-data","machine_learning/lightgbm-intro-for-tabular-data",{"title":105,"path":106,"stem":107},"Logistic Regression（Logit 回歸）完整教學","/machine_learning/logistic-regression-complete-guide","machine_learning/logistic-regression-complete-guide",{"title":109,"path":110,"stem":111},"為什麼模型訓練需要 Train / Validation / Test Dataset？","/machine_learning/train-validation-test-dataset","machine_learning/train-validation-test-dataset",{"title":113,"path":114,"stem":115},"XGBoost 原理與實務教學","/machine_learning/xgboost-complete-guide","machine_learning/xgboost-complete-guide",{"title":117,"path":118,"stem":119,"children":120,"page":41},"Network","/network","network",[121],{"title":122,"path":123,"stem":124},"DNS 設定入門：CNAME vs A Record 完整解析","/network/dns-cname-vs-a-record-guide","network/dns-cname-vs-a-record-guide",{"title":126,"path":127,"stem":128,"children":129},"Nuxt","/nuxt","nuxt",[130,133,137,141,145,149,153,157],{"title":131,"path":127,"stem":132},"Nuxt 實戰指南","nuxt/index",{"title":134,"path":135,"stem":136},"Abstraction Layer 與 Adapter 的差別，一次搞懂設計角色","/nuxt/adapter_abstraction_layer","nuxt/adapter_abstraction_layer",{"title":138,"path":139,"stem":140},"Nuxt 4 全面理解 — 專案檔案結構解析","/nuxt/directory_structure","nuxt/directory_structure",{"title":142,"path":143,"stem":144},"Nuxt 前端 build 流程完整解析","/nuxt/frontend_build","nuxt/frontend_build",{"title":146,"path":147,"stem":148},"Nitro 是什麼？從 Nuxt 專案到 Server 與 Edge 的關鍵引擎","/nuxt/nitro","nuxt/nitro",{"title":150,"path":151,"stem":152},"深入理解 Nuxt 的 .nuxt 與 .output：為什麼部署時一定要分清楚？","/nuxt/nuxt_and_output","nuxt/nuxt_and_output",{"title":154,"path":155,"stem":156},"Nuxt 中 dev、build、preview 的差異一次搞懂","/nuxt/nuxt_dev_build_preview","nuxt/nuxt_dev_build_preview",{"title":158,"path":159,"stem":160},"Nuxt Image vs \u003Cimg>：為什麼 Nuxt 3 專案幾乎都該用 \u003CNuxtImg>？","/nuxt/nuxt_image","nuxt/nuxt_image",{"title":162,"path":163,"stem":164,"children":165},"Python 程式開發","/python","python/index",[166,167,171,175],{"title":162,"path":163,"stem":164},{"title":168,"path":169,"stem":170},"如何在 FastAPI 中調用記憶體 Buffer 回傳圖片 (附實例)","/python/memory_buffer","python/memory_buffer",{"title":172,"path":173,"stem":174},"Python 單元測試教學：如何為你的程式撰寫 Test","/python/python-unit-testing-unittest-pytest","python/python-unit-testing-unittest-pytest",{"title":176,"path":177,"stem":178},"如何使用 uv 取代 pip：改善 Python 專案的開發流程","/python/uv","python/uv",{"title":180,"path":181,"stem":182,"children":183,"page":41},"Statistic","/statistic","statistic",[184,188,192,196],{"title":185,"path":186,"stem":187},"卡方檢定（Chi-Square Test）入門教學","/statistic/chi-square-test-intro","statistic/chi-square-test-intro",{"title":189,"path":190,"stem":191},"常見抽樣方法（Sampling Methods）教學：Stratified、Quota、Convenience、Systematic、Simple Random","/statistic/common-sampling-methods-guide","statistic/common-sampling-methods-guide",{"title":193,"path":194,"stem":195},"Cramér’s V 指標介紹：如何衡量兩個類別變數之間的關聯","/statistic/cramers-v-for-categorical-association","statistic/cramers-v-for-categorical-association",{"title":197,"path":198,"stem":199},"Mann–Whitney U 與 Kolmogorov–Smirnov（KS）檢定：非參數統計檢定的入門指南","/statistic/mann-whitney-u-and-ks-test-intro","statistic/mann-whitney-u-and-ks-test-intro",{"title":201,"path":202,"stem":203,"children":204},"WebDev","/web_dev","web_dev",[205,208,234,248,282,312,334],{"title":206,"path":202,"stem":207},"Web 前端開發","web_dev/index",{"title":209,"path":210,"stem":211,"children":212},"瀏覽器與渲染","/web_dev/browser","web_dev/browser/index",[213,214,218,222,226,230],{"title":209,"path":210,"stem":211},{"title":215,"path":216,"stem":217},"瀏覽器儲存空間完整解析：Cookie、localStorage、IndexedDB 到 Cache Storage","/web_dev/browser/browser-storage-comprehensive-guide","web_dev/browser/browser-storage-comprehensive-guide",{"title":219,"path":220,"stem":221},"DOM (Document Object Model) 深入解析","/web_dev/browser/dom","web_dev/browser/dom",{"title":223,"path":224,"stem":225},"Service Worker Request Flow 深入解析","/web_dev/browser/service-worker-request-flow","web_dev/browser/service-worker-request-flow",{"title":227,"path":228,"stem":229},"CSR、SSR 與 SSG 是什麼？前端渲染策略完整比較","/web_dev/browser/ssr_csr_ssg","web_dev/browser/ssr_csr_ssg",{"title":231,"path":232,"stem":233},"Virtual DOM 深入解析：為什麼它能優化前端效能？","/web_dev/browser/virtual_dom","web_dev/browser/virtual_dom",{"title":235,"path":236,"stem":237,"children":238},"圖形技術","/web_dev/graphics","web_dev/graphics/index",[239,240,244],{"title":235,"path":236,"stem":237},{"title":241,"path":242,"stem":243},"為什麼 Three.js 專案幾乎都選擇 CSR？從 SSR 問題談起","/web_dev/graphics/threejs_csr","web_dev/graphics/threejs_csr",{"title":245,"path":246,"stem":247},"WebGL 是什麼？為什麼前端 3D 幾乎都靠它？","/web_dev/graphics/webgl","web_dev/graphics/webGL",{"title":249,"path":250,"stem":251,"children":252},"架構與配置","/web_dev/infrastructure","web_dev/infrastructure/index",[253,254,258,262,266,270,274,278],{"title":249,"path":250,"stem":251},{"title":255,"path":256,"stem":257},"Zeabur + K3s + Nuxt 部署架構完整解析","/web_dev/infrastructure/k3s-zeabur","web_dev/infrastructure/K3s-zeabur",{"title":259,"path":260,"stem":261},"ECS vs Docker vs Kubernetes：從部署堆疊理解三層架構","/web_dev/infrastructure/ecs-docker-kubernetes-stack","web_dev/infrastructure/ecs-docker-kubernetes-stack",{"title":263,"path":264,"stem":265},"ECS vs VPS 是什麼？從部署網站的角度一次搞懂差別","/web_dev/infrastructure/ecs-vs-vps","web_dev/infrastructure/ecs-vs-vps",{"title":267,"path":268,"stem":269},"Zeabur 內網服務連線完整入門指南","/web_dev/infrastructure/k3s-internal-networking","web_dev/infrastructure/k3s-internal-networking",{"title":271,"path":272,"stem":273},"使用 Microservices 架構設計系統的優勢解析","/web_dev/infrastructure/microservices-architecture-advantages","web_dev/infrastructure/microservices-architecture-advantages",{"title":275,"path":276,"stem":277},"Nginx 入門教學：從反向代理到與 Kubernetes 的架構比較","/web_dev/infrastructure/nginx-intro","web_dev/infrastructure/nginx-intro",{"title":279,"path":280,"stem":281},"YAML 配置是什麼？為什麼現代開發都在用它","/web_dev/infrastructure/yaml-configuration","web_dev/infrastructure/yaml-configuration",{"title":283,"path":284,"stem":285,"children":286},"網絡與通訊","/web_dev/network","web_dev/network/index",[287,288,292,296,300,304,308],{"title":283,"path":284,"stem":285},{"title":289,"path":290,"stem":291},"HTTP Request 結構完整解析：從 Request Line 到 Header 一次看懂","/web_dev/network/http-request-structure","web_dev/network/http-request-structure",{"title":293,"path":294,"stem":295},"OSI 模型（Open Systems Interconnection Model）完整解析","/web_dev/network/osi-model","web_dev/network/osi-model",{"title":297,"path":298,"stem":299},"RESTful API 設計原則與實務解析","/web_dev/network/restful-api","web_dev/network/restful-api",{"title":301,"path":302,"stem":303},"RESTful API 五大設計原則深入解析","/web_dev/network/restful-api-principles","web_dev/network/restful-api-principles",{"title":305,"path":306,"stem":307},"Server-Sent Events (SSE) 深入解析與實作教學","/web_dev/network/sse-introduction","web_dev/network/sse-introduction",{"title":309,"path":310,"stem":311},"WebSocket 入門教學：從概念到 Node.js 實作","/web_dev/network/websocket-introduction","web_dev/network/websocket-introduction",{"title":313,"path":314,"stem":315,"children":316},"認證與安全","/web_dev/security","web_dev/security/index",[317,318,322,326,330],{"title":313,"path":314,"stem":315},{"title":319,"path":320,"stem":321},"使用 Cookie 與 Session 建立使用者驗證（完整新手教學）","/web_dev/security/cookie-session-authentication","web_dev/security/cookie-session-authentication",{"title":323,"path":324,"stem":325},"JWT 驗證機制完整解析：從登入流程到實務應用","/web_dev/security/jwt-authentication","web_dev/security/jwt-authentication",{"title":327,"path":328,"stem":329},"Secret Key 簽名是什麼？從零理解資料簽名的本質","/web_dev/security/secret-key-signing","web_dev/security/secret-key-signing",{"title":331,"path":332,"stem":333},"SSH（Secure Shell）是什麼？從遠端登入到安全通道的核心概念","/web_dev/security/ssh","web_dev/security/ssh",{"title":335,"path":336,"stem":337,"children":338},"SEO 與規範","/web_dev/seo","web_dev/seo/index",[339,340,344,348],{"title":335,"path":336,"stem":337},{"title":341,"path":342,"stem":343},"Canonical URL 是什麼？用生活化方式搞懂前端 SEO 的基本保命符","/web_dev/seo/canonical_link","web_dev/seo/canonical_link",{"title":345,"path":346,"stem":347},"robots.txt 是什麼？SEO 的第一道守門員","/web_dev/seo/robot_txt","web_dev/seo/robot_txt",{"title":349,"path":350,"stem":351},"Nuxt SEO 中的 Meta 與 SEO 工具是如何運作的？","/web_dev/seo/seo","web_dev/seo/seo",{"id":353,"title":289,"body":354,"description":950,"extension":951,"links":952,"meta":953,"navigation":856,"path":290,"seo":961,"stem":291,"__hash__":962},"docs/web_dev/network/http-request-structure.md",{"type":355,"value":356,"toc":934},"minimark",[357,361,365,368,371,376,379,451,454,456,460,489,501,511,514,527,530,532,536,544,547,550,552,556,564,570,573,575,579,589,595,602,604,608,616,621,624,626,630,639,642,653,656,658,662,694,699,719,721,725,733,738,745,747,751,759,762,764,768,776,783,785,789,792,823,826,863,869,871,875,878,905,911,913,916,919,927,930],[358,359,289],"h1",{"id":360},"http-request-結構完整解析從-request-line-到-header-一次看懂",[362,363,364],"p",{},"在理解 HTTP 是瀏覽器與伺服器之間溝通的規則後，本篇文章將更進一步，帶你拆解一個「接近真實瀏覽器送出的完整 HTTP Request」，逐段說明每個欄位的意義與存在的理由。",[362,366,367],{},"我們會使用瀏覽器（例如 Google Chrome）打開首頁時常見的請求內容作為範例，從上到下完整分析。",[369,370],"hr",{},[372,373,375],"h2",{"id":374},"一個較完整的-http-request-範例","一個較完整的 HTTP Request 範例",[362,377,378],{},"以下是一個常見的 HTTP/1.1 GET 請求：",[380,381,386],"pre",{"className":382,"code":383,"language":384,"meta":385,"style":385},"language-makefile shiki shiki-themes github-dark","GET / HTTP/1.1\nHost: example.com\nConnection: keep-alive\nCache-Control: max-age=0\nUpgrade-Insecure-Requests: 1\nUser-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/120.0.0.0\nAccept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8\nAccept-Encoding: gzip, deflate, br\nAccept-Language: zh-TW,zh;q=0.9,en-US;q=0.8,en;q=0.7\nCookie: sessionId=abc123\n","makefile","",[387,388,389,397,403,409,415,421,427,433,439,445],"code",{"__ignoreMap":385},[390,391,394],"span",{"class":392,"line":393},"line",1,[390,395,396],{},"GET / HTTP/1.1\n",[390,398,400],{"class":392,"line":399},2,[390,401,402],{},"Host: example.com\n",[390,404,406],{"class":392,"line":405},3,[390,407,408],{},"Connection: keep-alive\n",[390,410,412],{"class":392,"line":411},4,[390,413,414],{},"Cache-Control: max-age=0\n",[390,416,418],{"class":392,"line":417},5,[390,419,420],{},"Upgrade-Insecure-Requests: 1\n",[390,422,424],{"class":392,"line":423},6,[390,425,426],{},"User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) Chrome/120.0.0.0\n",[390,428,430],{"class":392,"line":429},7,[390,431,432],{},"Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8\n",[390,434,436],{"class":392,"line":435},8,[390,437,438],{},"Accept-Encoding: gzip, deflate, br\n",[390,440,442],{"class":392,"line":441},9,[390,443,444],{},"Accept-Language: zh-TW,zh;q=0.9,en-US;q=0.8,en;q=0.7\n",[390,446,448],{"class":392,"line":447},10,[390,449,450],{},"Cookie: sessionId=abc123\n",[362,452,453],{},"這就是瀏覽器實際送出的原始文字內容。HTTP 本質上就是一段符合規範格式的純文字協定。我們現在從上到下逐段說明。",[369,455],{},[372,457,459],{"id":458},"_1️⃣-request-line請求的起始行","1️⃣ Request Line：請求的起始行",[380,461,464],{"className":462,"code":396,"language":463,"meta":385,"style":385},"language-sql shiki shiki-themes github-dark","sql",[387,465,466],{"__ignoreMap":385},[390,467,468,472,475,478,482,486],{"class":392,"line":393},[390,469,471],{"class":470},"snl16","GET",[390,473,474],{"class":470}," /",[390,476,477],{"class":470}," HTTP/",[390,479,481],{"class":480},"sDLfK","1",[390,483,485],{"class":484},"s95oV",".",[390,487,488],{"class":480},"1\n",[362,490,491,492,496,497,500],{},"這一行稱為 ",[493,494,495],"strong",{},"Request Line","（請求起始行），格式為：",[387,498,499],{},"METHOD + PATH + HTTP VERSION","。",[362,502,503,504],{},"在這個例子中，它的意思是：",[493,505,506,507,510],{},"使用 GET 方法，對 ",[387,508,509],{},"/"," 這個路徑發出請求，並使用 HTTP/1.1 協定。",[362,512,513],{},"這一行定義了三件非常重要的事情：",[515,516,517,521,524],"ul",{},[518,519,520],"li",{},"第一，瀏覽器要做什麼（GET）。",[518,522,523],{},"第二，目標資源在哪裡（/）。",[518,525,526],{},"第三，使用哪一個協定版本（HTTP/1.1）。",[362,528,529],{},"HTTP 的「行為」本質上就是由這一行決定的。",[369,531],{},[372,533,535],{"id":534},"_2️⃣-host目標網站","2️⃣ Host：目標網站",[380,537,538],{"className":382,"code":402,"language":384,"meta":385,"style":385},[387,539,540],{"__ignoreMap":385},[390,541,542],{"class":392,"line":393},[390,543,402],{},[362,545,546],{},"這個 Header 的作用是告訴伺服器：「這個請求是要給哪個網站的」。",[362,548,549],{},"在現代環境中，一台伺服器通常會透過 Virtual Hosting 技術同時服務多個網站。如果沒有 Host，伺服器就無法判斷這個請求應該對應哪個網站。在 HTTP/1.1 中，Host 是強制性的欄位。",[369,551],{},[372,553,555],{"id":554},"_3️⃣-connection連線策略","3️⃣ Connection：連線策略",[380,557,558],{"className":382,"code":408,"language":384,"meta":385,"style":385},[387,559,560],{"__ignoreMap":385},[390,561,562],{"class":392,"line":393},[390,563,408],{},[362,565,566,567],{},"這個欄位表示：",[493,568,569],{},"回應完成後不要關閉 TCP 連線。",[362,571,572],{},"在早期 HTTP/1.0 中，每一次請求都會建立一次 TCP 連線，用完就關閉，效率非常低。HTTP/1.1 預設支援 keep-alive，可以讓後續請求共用同一條連線（例如拿完 HTML 後接著拿 CSS、JS、圖片），大幅降低延遲成本。",[369,574],{},[372,576,578],{"id":577},"_4️⃣-cache-control快取控制","4️⃣ Cache-Control：快取控制",[380,580,583],{"className":581,"code":414,"language":582,"meta":385,"style":385},"language-arduino shiki shiki-themes github-dark","arduino",[387,584,585],{"__ignoreMap":385},[390,586,587],{"class":392,"line":393},[390,588,414],{},[362,590,591,592],{},"這表示：",[493,593,594],{},"瀏覽器希望重新驗證這個資源是否為最新版本。",[362,596,597,598,601],{},"瀏覽器在控制的是「要不要使用快取」。當 ",[387,599,600],{},"max-age=0"," 出現時，代表即使本地有快取，也要先向伺服器確認是否需要更新。",[369,603],{},[372,605,607],{"id":606},"_5️⃣-upgrade-insecure-requests安全升級請求","5️⃣ Upgrade-Insecure-Requests：安全升級請求",[380,609,610],{"className":382,"code":420,"language":384,"meta":385,"style":385},[387,611,612],{"__ignoreMap":385},[390,613,614],{"class":392,"line":393},[390,615,420],{},[362,617,591,618],{},[493,619,620],{},"如果資源是 HTTP，請嘗試升級為 HTTPS。",[362,622,623],{},"這是一種安全機制，用來減少混合內容（mixed content）問題，也能避免在安全頁面中載入不安全資源。",[369,625],{},[372,627,629],{"id":628},"_6️⃣-user-agent客戶端資訊","6️⃣ User-Agent：客戶端資訊",[380,631,633],{"className":382,"code":632,"language":384,"meta":385,"style":385},"User-Agent: Mozilla/5.0 (...) Chrome/120.0.0.0\n",[387,634,635],{"__ignoreMap":385},[390,636,637],{"class":392,"line":393},[390,638,632],{},[362,640,641],{},"這個欄位描述了：",[515,643,644,647,650],{},[518,645,646],{},"瀏覽器類型",[518,648,649],{},"作業系統",[518,651,652],{},"裝置資訊",[362,654,655],{},"伺服器可能會根據 User-Agent 進行相容性處理、統計分析，或回傳不同版本內容（例如行動版網站）。",[369,657],{},[372,659,661],{"id":660},"_7️⃣-accept可接受的回應格式","7️⃣ Accept：可接受的回應格式",[380,663,666],{"className":664,"code":432,"language":665,"meta":385,"style":385},"language-bash shiki shiki-themes github-dark","bash",[387,667,668],{"__ignoreMap":385},[390,669,670,674,678,681,684,687,689,691],{"class":392,"line":393},[390,671,673],{"class":672},"svObZ","Accept:",[390,675,677],{"class":676},"sU2Wk"," text/html,application/xhtml+xml,application/xml",[390,679,680],{"class":484},";q",[390,682,683],{"class":470},"=",[390,685,686],{"class":676},"0.9,image/webp,*/*",[390,688,680],{"class":484},[390,690,683],{"class":470},[390,692,693],{"class":676},"0.8\n",[362,695,566,696],{},[493,697,698],{},"瀏覽器可以接受哪些格式的回應。",[515,700,701,707,713],{},[518,702,703,706],{},[387,704,705],{},"text/html"," 是最高優先。",[518,708,709,712],{},[387,710,711],{},"application/xml;q=0.9"," 表示可以接受，但優先度較低（q 代表 quality value）。",[518,714,715,718],{},[387,716,717],{},"*/*"," 表示任何格式都可以。",[369,720],{},[372,722,724],{"id":723},"_8️⃣-accept-encoding壓縮格式","8️⃣ Accept-Encoding：壓縮格式",[380,726,727],{"className":382,"code":438,"language":384,"meta":385,"style":385},[387,728,729],{"__ignoreMap":385},[390,730,731],{"class":392,"line":393},[390,732,438],{},[362,734,591,735],{},[493,736,737],{},"瀏覽器可以接受壓縮過的資料。",[362,739,740,741,744],{},"如果伺服器支援，可能會回傳 ",[387,742,743],{},"Content-Encoding: gzip","。這會讓傳輸量大幅降低，提高整體效能。現代網站幾乎都會啟用壓縮。",[369,746],{},[372,748,750],{"id":749},"_9️⃣-accept-language語言偏好","9️⃣ Accept-Language：語言偏好",[380,752,753],{"className":382,"code":444,"language":384,"meta":385,"style":385},[387,754,755],{"__ignoreMap":385},[390,756,757],{"class":392,"line":393},[390,758,444],{},[362,760,761],{},"這表示語言優先順序為：繁體中文 → 中文 → 美式英文 → 英文。伺服器可以依此決定回傳哪個語言版本的內容。",[369,763],{},[372,765,767],{"id":766},"cookie狀態資料","🔟 Cookie：狀態資料",[380,769,770],{"className":382,"code":450,"language":384,"meta":385,"style":385},[387,771,772],{"__ignoreMap":385},[390,773,774],{"class":392,"line":393},[390,775,450],{},[362,777,778,779,782],{},"這是 HTTP 中非常關鍵的一個欄位。因為 HTTP 本身是 ",[493,780,781],{},"stateless（無狀態）"," 的協定，每一次請求彼此獨立。Cookie 的存在，是為了讓伺服器能辨識使用者（例如登入狀態、購物車內容）。",[369,784],{},[372,786,788],{"id":787},"http-request-的完整結構","HTTP Request 的完整結構",[362,790,791],{},"實際上，一個 HTTP Request 結構如下：",[380,793,797],{"className":794,"code":795,"language":796,"meta":385,"style":385},"language-css shiki shiki-themes github-dark","Request Line\nHeaders\n(空行)\nBody（可選）\n","css",[387,798,799,808,813,818],{"__ignoreMap":385},[390,800,801,804],{"class":392,"line":393},[390,802,803],{"class":484},"Request ",[390,805,807],{"class":806},"s4JwU","Line\n",[390,809,810],{"class":392,"line":399},[390,811,812],{"class":484},"Headers\n",[390,814,815],{"class":392,"line":405},[390,816,817],{"class":484},"(空行)\n",[390,819,820],{"class":392,"line":411},[390,821,822],{"class":484},"Body（可選）\n",[362,824,825],{},"例如一個帶有 Body 的 POST 請求：",[380,827,831],{"className":828,"code":829,"language":830,"meta":385,"style":385},"language-pgsql shiki shiki-themes github-dark","POST /login HTTP/1.1\nHost: example.com\nContent-Type: application/json\nContent-Length: 18\n\n{\"user\":\"damien\"}\n","pgsql",[387,832,833,838,842,847,852,858],{"__ignoreMap":385},[390,834,835],{"class":392,"line":393},[390,836,837],{},"POST /login HTTP/1.1\n",[390,839,840],{"class":392,"line":399},[390,841,402],{},[390,843,844],{"class":392,"line":405},[390,845,846],{},"Content-Type: application/json\n",[390,848,849],{"class":392,"line":411},[390,850,851],{},"Content-Length: 18\n",[390,853,854],{"class":392,"line":417},[390,855,857],{"emptyLinePlaceholder":856},true,"\n",[390,859,860],{"class":392,"line":423},[390,861,862],{},"{\"user\":\"damien\"}\n",[362,864,865,868],{},[493,866,867],{},"請注意：Header 與 Body 之間一定要有一個空行。"," 這是 HTTP 規範明確要求的分隔方式。",[369,870],{},[372,872,874],{"id":873},"建立一個清晰的-http-心智模型","建立一個清晰的 HTTP 心智模型",[362,876,877],{},"你可以把一個 HTTP Request 想成四個層次：",[879,880,881,887,893,899],"ol",{},[518,882,883,886],{},[493,884,885],{},"動作（Method）","：WHAT to do",[518,888,889,892],{},[493,890,891],{},"目標（Path + Host）","：WHERE to go",[518,894,895,898],{},[493,896,897],{},"附加資訊（Headers）","：META info",[518,900,901,904],{},[493,902,903],{},"實際資料（Body）","：DATA",[362,906,907,908],{},"也就是：",[493,909,910],{},"WHAT → WHERE → META → DATA",[369,912],{},[372,914,915],{"id":915},"一句話總結",[362,917,918],{},"一個完整的 HTTP Request，其實就是在對伺服器說：",[920,921,922],"blockquote",{},[362,923,924],{},[493,925,926],{},"我要對某個資源做某件事，並附帶一些環境資訊與資料。",[362,928,929],{},"只要你把 Request Line、Header 與 Body 的角色區分清楚，HTTP 就會從「神祕的網路黑盒子」，變成一段有邏輯、有結構的純文字溝通格式。",[931,932,933],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":385,"searchDepth":399,"depth":399,"links":935},[936,937,938,939,940,941,942,943,944,945,946,947,948,949],{"id":374,"depth":399,"text":375},{"id":458,"depth":399,"text":459},{"id":534,"depth":399,"text":535},{"id":554,"depth":399,"text":555},{"id":577,"depth":399,"text":578},{"id":606,"depth":399,"text":607},{"id":628,"depth":399,"text":629},{"id":660,"depth":399,"text":661},{"id":723,"depth":399,"text":724},{"id":749,"depth":399,"text":750},{"id":766,"depth":399,"text":767},{"id":787,"depth":399,"text":788},{"id":873,"depth":399,"text":874},{"id":915,"depth":399,"text":915},"透過真實瀏覽器送出的 HTTP Request 範例，逐行拆解每個欄位的意義，建立完整的 HTTP 心智模型。","md",null,{"tags":954,"category":203,"date":960},[955,956,957,958,959],"http","web","backend","frontend","networking","2026-02-12",{"title":289,"description":950},"BoC9Ihs3avmrLi7wQqdRPq4IUErdGXb7h3vwfNLcc94",[964,966],{"title":283,"path":284,"stem":285,"description":965,"children":-1},"本區涵蓋 HTTP 協議、RESTful API 設計、WebSocket 及 SSE 等網絡通訊技術。",{"title":293,"path":294,"stem":295,"description":967,"children":-1},"從概念到實務，深入理解 OSI 七層模型如何運作，並掌握網路系統設計的核心思維。",1776690847363]