學習筆記 | 什麼是網路請求（HTTP response）
上篇記錄了關於 HTTP request 的筆記，這篇則是對於請求的回應紀錄～
有請求就有回應， HTTP response 就是伺服器對於這個請求的回應，不論請求是「成功」還是「失敗」，伺服器都會將這個請求的「回應結果」告知瀏覽器，跟 HTTP request 一樣會有 header 和 body 兩部份
Response Header
Response header 內會附上關於請求的回應狀態碼、回覆的資料類型Content-Type 和 資料長度 Content-Length 等訊息
從 Chrome 開發者工具的 Network 可以查看，這是我點擊進入旅遊網站的產品頁面後，伺服器回傳給我的內容，包含請求的網址(Request URL)、請求的方法、回應狀態碼和我的IP位置等
其中狀態呈現綠色 200，我們就可以知道這個請求是「成功」的，可以從 response body 找到我們要請求的資料，一般常見的狀態碼有
- 200 成功回應
- 4xx 用戶端錯誤回應
- 5xx 伺服器端錯誤
其他詳細的狀態碼可以參考MDN文件
身為新手一開始最害怕看到 4xx、5xx 各種紅色錯誤警告，不過學會看狀態碼和伺服器回傳的錯誤訊息後，就會減少很多寫 code 的挫折感!
首先，遇到 4xx 類型的錯誤，90%是前端程式碼有誤、請求資源錯誤等問題，我自己發生的錯誤就有以下幾種：
- 程式碼拼錯字，少了 ed、少加一個 s ...，都會導致資源讀取不到，而發生錯誤的情形
- 請求方法、api 路徑、請求的參數錯誤、格式不正確、或是缺少必填的參數也會導致請求失敗
- 請求資源不存在，資料庫找不到指定的資料，請求再度失敗
- 權限不足，伺服器會阻擋，導致請求失敗
- CORS 跨域問題
除了權限和CORS，以上問題通常檢查一下自己的錯字，請求的參數格式，就可以解決一半了，沒有想像中可怕！
遇到權限問題或 500 錯誤，通常我就會直接去找後端工程師討論，CORS問題就比較複雜些...
CORS 是什麼呢?
CORS 是 Cross-Origin Resource Sharing 的縮寫，中文則是「跨來源資源共用」，是瀏覽器本身的一種防禦機制，網頁想存取不同源的伺服器的資源時，都必須遵守
圖片來源：https://Io-victoria.com/introduction-to-cross-origin-resource-sharing-cors
主要概念是，當網路請求「不同源」時，瀏覽器會基於安全性而阻擋這個請求的「回傳」，也就是請求發送出去，伺服器也回傳資料了，但是你無法從瀏覽器中查看回傳的結果
那麼什麼情況下屬於「不同源」?
- 不同協定：http、https就是不同的網路協定方式
- 不同埠號：:3000、:8080
- 不同網域：google.com / yahoo.com
所以在開發時，前端和 api server 不在同一台主機上，或是不同埠號，就會產生CORS的問題
至於如何解決CORS的問題呢？
1. 找後端工程師協助處理：
- 請後端工程師在 response header 裡設置相應的標頭，如
Access-Control-Allow-Origin: *，代表伺服器允許所有來源的請求 - 考慮到
*是允許所有來源，會有安全性問題，也可填入「具體的來源」
2. 在開發環境使用代理伺服器：
- 由代理伺服器來轉發請求，繞過 CORS 限制（我目前只使用過 vite 的 proxy 代理，實作可以參考官方文件）
Response Body
Response body 這部分就比較沒有疑問了，我們請求的資料都會裝在 body 內部，查看的方式有以下幾種：
- 最簡單用 console 印出來
- Network 裡面的 response
- Network 裡面的 preview : 開發者工具會幫我們將 payload 用易於閱讀的方式顯示
HTTP response 的筆記就到這裡結束啦！
我是Amber，前端學習中，歡迎交流討論🧸
Github | Discord：@amberhh
其他參考文章：
你可能也想看
