學習筆記 | 什麼是網路請求(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


其他參考文章:




avatar-img
23會員
22內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Amber hh的沙龍 的其他內容
上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
身為一個非本科新手工程師,對於網路知識還是有許多疑惑之處,像是我在編輯器上寫了數十行的程式碼,那它們是怎麼透過終端機的指令被運行起來,讓我可以一邊開發一邊預覽結果呢?
時間真的過得好快,從2022五月的體驗營開始,到後來的切版直播班、JS直播班,將近一年的時間,現在都要從Vue直播班畢業了!
事情是這樣發生的,由於直播班第二週和第三週的作業內容很相似,於是我就把第二週的作業資料夾「複製」了一份,作為第三週的基底,並把第三週的作業內容完成後,準備上傳到一個新建的 week3 遠端 repository ...
9 月份剛從切版直播班畢業(可以看這一篇學習紀錄),我是毫不猶豫的就參加了下一階段的 JavaScript 直播班!當然是因為不滿足於作品只能是靜態的切版頁面,還想加入更多酷酷的效果,但總是會在使用套件上卡住,對 API 的概念也不足,接資料時二二六六的,不甘於被技術受限制的自己,當然要繼續修練😤
相信大家對於 sticky 這個效果不陌生,網頁上方的導覽列、文章側邊的相關閱讀等,諸多網頁都能看見它的身影,不過這篇不是 sticky 的使用教學,而是我自己的踩雷紀錄😅💣
上一篇【瀏覽器與伺服器是如何溝通的?】有說瀏覽器和伺服器的溝通橋樑是「網路請求」,這篇就來記錄一下,我目前學習到的網路請求是什麼~
身為一個非本科新手工程師,對於網路知識還是有許多疑惑之處,像是我在編輯器上寫了數十行的程式碼,那它們是怎麼透過終端機的指令被運行起來,讓我可以一邊開發一邊預覽結果呢?
時間真的過得好快,從2022五月的體驗營開始,到後來的切版直播班、JS直播班,將近一年的時間,現在都要從Vue直播班畢業了!
事情是這樣發生的,由於直播班第二週和第三週的作業內容很相似,於是我就把第二週的作業資料夾「複製」了一份,作為第三週的基底,並把第三週的作業內容完成後,準備上傳到一個新建的 week3 遠端 repository ...
9 月份剛從切版直播班畢業(可以看這一篇學習紀錄),我是毫不猶豫的就參加了下一階段的 JavaScript 直播班!當然是因為不滿足於作品只能是靜態的切版頁面,還想加入更多酷酷的效果,但總是會在使用套件上卡住,對 API 的概念也不足,接資料時二二六六的,不甘於被技術受限制的自己,當然要繼續修練😤
相信大家對於 sticky 這個效果不陌生,網頁上方的導覽列、文章側邊的相關閱讀等,諸多網頁都能看見它的身影,不過這篇不是 sticky 的使用教學,而是我自己的踩雷紀錄😅💣
你可能也想看
Google News 追蹤
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
網頁回應碼是指當網頁伺服器處理完一個請求後所回傳的狀態碼。這篇文章介紹了網頁回應碼的分類,包括1XX、2XX、3XX、4XX和5XX狀態碼,並解釋了各種狀態碼的意義和常見原因。
Thumbnail
API(Application Programming Interface,應用程式介面)可以視為不同軟體系統之間的溝通橋梁,讓雙邊可以交換數據並執行各種功能。這篇會記錄產品經理一定要知道的幾個 API 概念,像是常見的錯誤代碼以及不同的 HTTP 方法(如 PUT、GET、POST)和實際案例說明
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
※ 什麼是 RESTful API? 這種運用 HTTP 來表達語義的路由設計風格稱為 RESTful API,它描述了如何實現 Web API 的架構。所謂的 API 是應用程式介面 (application programming interface),網址也是一種應用程式的「介面」,故稱為
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
Thumbnail
資訊回應(Informational responses) 100~199 100(Continue):伺服器在等待用戶端繼續請求。 102(Processing):伺服器收到請求正在處理中。 成功回應(Successful responses) 200~299 200(OK):請求
Thumbnail
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
在這篇教學文章中,我們將展示如何使用 Node.js 建立一個簡單的伺服器,並解決常見的跨來源資源共享(CORS)問題,確保伺服器能夠接收並處理來自不同來源的資料。
Thumbnail
網頁回應碼是指當網頁伺服器處理完一個請求後所回傳的狀態碼。這篇文章介紹了網頁回應碼的分類,包括1XX、2XX、3XX、4XX和5XX狀態碼,並解釋了各種狀態碼的意義和常見原因。
Thumbnail
API(Application Programming Interface,應用程式介面)可以視為不同軟體系統之間的溝通橋梁,讓雙邊可以交換數據並執行各種功能。這篇會記錄產品經理一定要知道的幾個 API 概念,像是常見的錯誤代碼以及不同的 HTTP 方法(如 PUT、GET、POST)和實際案例說明
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
xhr 在下面的例子裡,我們首先建立了一個 XMLHttpRequest 物件,並使用 .open() 開啟一個 URL,最後使用 .send() 發出 request。 具體來說步驟有四個: 建立XMLHttpReque 開啟一個請求。 送出請求。 拿到回應後去處理畫面要如何呈現。
※ 什麼是 RESTful API? 這種運用 HTTP 來表達語義的路由設計風格稱為 RESTful API,它描述了如何實現 Web API 的架構。所謂的 API 是應用程式介面 (application programming interface),網址也是一種應用程式的「介面」,故稱為
Thumbnail
在API介接中使用x-www-form-urlencoded格式時,可能會遇到一些踩坑的情況,本文分享了作者在這方面遇到的問題和解決方法。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
Thumbnail
資訊回應(Informational responses) 100~199 100(Continue):伺服器在等待用戶端繼續請求。 102(Processing):伺服器收到請求正在處理中。 成功回應(Successful responses) 200~299 200(OK):請求