學習筆記 | 什麼是網路請求(HTTP response)

閱讀時間約 4 分鐘

上篇記錄了關於 HTTP request 的筆記,這篇則是對於請求的回應紀錄~

有請求就有回應, HTTP response 就是伺服器對於這個請求的回應,不論請求是「成功」還是「失敗」,伺服器都會將這個請求的「回應結果」告知瀏覽器,跟 HTTP request 一樣會有 header 和 body 兩部份

Response Header

Response header 內會附上關於請求的回應狀態碼、回覆的資料類型Content-Type 和 資料長度 Content-Length 等訊息

raw-image

從 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

圖片來源: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


其他參考文章:




20會員
19內容數
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
1-0 「類型」是什麼 ? 【我想,成為我自己】 一一 我的人類圖學習筆記就像是一間公司裡,需要有各種不同的職位,互相合作,才能發揮最大的效益。 這個世界裡,每個人的天賦才能都不相同,也因此得以互相幫助。 這裡的類型,像是在說明著「你所擁有的天賦特質」 這世界總共有五個類型 : 顯示者、生產者、顯示生產者、投射者、反映者。 如果用一句話簡單說明,這些類型會像是這樣
Thumbnail
avatar
啾鴿Chugar
2023-07-31
【網站開發學習筆記】什麼是網站前端工程師本篇最主要是要了解網站前端工程師究竟是什麼?主要工作內容又有哪些?將從三個部份來說明:前端的工作內容、前端所需的軟實力以及前端所需的硬實力。
avatar
佧佧
2023-04-29
【學習筆記】快速建立漂亮的一頁式網頁 —— Bootstrap 套件不可不知的 7 大技能本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
Thumbnail
avatar
何家慈 Chia Tzu Ho
2022-11-13
4-3 在困境中學習 現在來寫一則困境,在你的筆記本上寫下「我過去是那樣,但我現在......」,分享你在困境中學到什麼話語更難,因為它直接、瞬即、無法修改。所以相較於可以一再推敲、修改的文字,話語反求內心的修正,把你的心穩穩地盤繞在,一個即便世界如何擠壓你,也不會說出傷害他人話語的地步。這很難,非常難,差不多是一種類似內觀的修煉才能照見自己的心。所以,我很敬佩助人工作者,他們要如何以話語來療治、陪伴病人呢?這對我而
avatar
沙貓貓
2021-12-28
【一流人閱讀筆記】為什麼他懂這麼多?善用三項技巧,成為高效學習者本篇要談的這本《全圖解!厲害的人如何學?》 作者—山崎拓巳提到,高中時的他在四百公尺跨欄賽跑中遇到了瓶頸。他花費了大量心力不斷地練習,卻還是難以抓到訣竅,突破目前的成績。 後來,他發現某所國中的體育老師是這項競賽的現役選手後,便開始想辦法請教那位老師。 透過這一小時的機會,讓作者更加確信...
Thumbnail
avatar
TASYA-STUDIO
2021-08-21
學習筆記| 什麼是科技管理? Management of Technology|管理科技 2020年9月6日,我冠上了一個新的身份,高雄市立空中大學學生的身份,朋友問我,我選修什麼科系,我回答「科技管理」。不少人感到困惑,這是什麼樣的科系,或者直覺認為這是有關資工、資管、資處方面的學系。 其實原先我也不了解,直到我開始了我第一門專業基礎必修課「科技管理」,在導師吳欣穎系主任的講解下,慢
Thumbnail
avatar
莊凱仲 Ivan
2021-04-19
生活教練學習筆記01|成功與否在於你選擇「專注」於什麼事情! 自去年三月底開始上Life Coach (生活教練) 的課程,至今也快滿一年了!(時間過好快啊 ~) 拖稿也拖太久了!哈哈。 我真的非常開心我選擇去上生活教練課程,除了學習到很多知識,我更認識我自己;並且在我的人生當中也有許多突破,這些突破是我初期學習生活教練時萬萬沒有想過,甚至沒有想到我會有突破
Thumbnail
avatar
艾曼達教練的簡單生活之旅
2021-02-14
【日商小職員學習筆記4】為什麼要整理、整頓海苔醬畢業後就進入日商公司,展開了日本文化的台灣職場生活。記得第一次到公司面試時,就覺得環境很乾淨,東西也放得整整齊齊的,地上放置的物品隱約有標示些什麼字樣,那時的海苔醬還不知道眼前這些,原來都是整理、整頓的產物阿!
Thumbnail
avatar
Hi海苔醬
2021-02-04
[讀書筆記] 才能的真相:為什麼學霸的職涯淪入平庸,墊底的卻大放異彩?日本補習班天王用超過每個人都是天才,但如果你靠爬樹的本領評斷一隻魚,那隻魚會一輩子相信自己很笨。- 12,引用自愛因斯坦
Thumbnail
avatar
沙加: 文字的公園
2020-03-06
習近平與蔡英文的首次交鋒?!統派、獨派吵什麼!?【學習筆記】#9​https://bit.ly/2H1cer6 習近平與蔡英文的首次交鋒?!統派、獨派吵什麼!? 文:廖斌洲 我們今天的主題要跟大家分享的是兩岸關係 ​ 在元旦剛過的隔天,1月2日,中國國家主席習近平 在《告台灣同胞書》發表四十週年,發表了重要的談話 ​
Thumbnail
avatar
我的學習筆記
2019-10-23