在跨網域存取(CORS)迷霧中的錯覺與啟示
更新於 2024/03/07閱讀時間約 2 分鐘
在進行前後端分離架構的開發過程中，我們配置了`www.domain.site`作為前端展示頁面，並將`api.domain.site`設置為後端API服務。這種架構要求前端從不同的源發出請求到後端服務器，這裡就涉及到了跨域請求的處理。
為什麼有這篇
我的困擾來自於在實際測試中發現，當使用`application/json`與`application/x-www-form-urlencoded`這兩種不同的Content-Type進行POST請求時，行為竟然迥異。這讓我意識到了「簡單請求」和「預檢請求」之間的關鍵區別，並且整理出這篇內容，就是要分享我在這個過程中的探索與解決方法，希望能幫助同樣遇到此類問題的開發者。
簡單請求（Simple Requests）
當我們發送一個HTTP請求，如果該請求符合以下條件，則被認為是「簡單請求」：
- 使用GET、HEAD或POST方法。
- HTTP標頭限於幾種指定的欄位。
- 若有Content-Type，也僅限於三種：`text/plain`、`multipart/form-data`或`application/x-www-form-urlencoded`。
簡單請求不會觸發CORS預檢，因此，使用`application/x-www-form-urlencoded`時，我發現請求能夠直接發送且順利獲得回應。
預檢請求（Preflighted Requests）
但當我將Content-Type改為`application/json`，情況就大不相同了。這種設定下的請求不再被視為簡單請求，瀏覽器會首先發出一個OPTIONS請求作為預檢，向伺服器確認是否允許實際的請求。這就是我所說的「預檢請求」。
解決方法
面對這個痛點，我們需要在後端服務器上進行適當的設定：
- 透過設置`Access-Control-Allow-Origin`來指明允許哪些來源的請求。
- 使用`Access-Control-Allow-Headers`來包含`Content-Type`，並明確允許`application/json`。
- 確保伺服器能夠處理OPTIONS方法的請求，並對這類預檢請求提供正確的CORS響應。
要怎麼判斷CORS是否設定成功呢？你會注意到，在我分享的「預檢請求」截圖中，狀態欄顯示的204和我圈出來的「回傳204」實際上是指同一件事情。當你在網路開發者工具中看到「預檢請求」的狀態碼為204，這表示你的CORS的OPTIONS請求已經成功通過了。
這篇文章的撰寫，旨在分享我在處理跨域請求時的經驗心得。我希望透過我的探索與解決方案，能夠幫助到其他開發者，更有效地理解並處理跨域請求中遇到的問題。
20會員
63內容數
這是一系列以軟體開發為主題的輕鬆分享，內容涵蓋了技術選擇、開發經驗、實戰應用等多方面的議題。無論是如何在眾多框架中做出選擇，還是如何應對技術轉移的挑戰，這裡有幽默、有趣的對話風格，將複雜的技術問題轉化為易懂的故事。
留言0
查看全部
你可能也想看
Google News 追蹤
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
在這篇教學文章中，我們將展示如何使用 Node.js 建立一個簡單的伺服器，並解決常見的跨來源資源共享（CORS）問題，確保伺服器能夠接收並處理來自不同來源的資料。
※ 什麼是Web API
API 就是後端開出來讓前端來用的介面，讓前端與後端可以溝通。
API流程：
終端使用者用任何一種裝置進入瀏覽器。
瀏覽器透過 API 向後端發出請求，請求查詢或修改資料。
後端透過 API 收到前端的請求後，取得資料並回應給前端。
前端渲染畫面，終端使用者
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
xhr
在下面的例子裡，我們首先建立了一個 XMLHttpRequest 物件，並使用 .open() 開啟一個 URL，最後使用 .send() 發出 request。
具體來說步驟有四個：
建立XMLHttpReque
開啟一個請求。
送出請求。
拿到回應後去處理畫面要如何呈現。
※ 什麼是 RESTful API？
這種運用 HTTP 來表達語義的路由設計風格稱為 RESTful API，它描述了如何實現 Web API 的架構。所謂的 API 是應用程式介面 (application programming interface)，網址也是一種應用程式的「介面」，故稱為
在API介接中使用x-www-form-urlencoded格式時，可能會遇到一些踩坑的情況，本文分享了作者在這方面遇到的問題和解決方法。
之前在【什麼是網路請求（HTTP response）】筆記裡有提到，網路請求遇到 CORS 跨域問題，在開發時可以透過 vite 的反向代理來解決，那麼什麼是反向代理，有反向代理的話是不是也有正向代理呢?
先前幾篇筆記介紹了網路請求，瀏覽器儲存資料的方式，那麼實務上，前端最常需要發送網路請求的時候，就是透過呼叫 API，去向後端工程師發送/請求資料，所以今天來記錄什麼是 API吧！
Request內容
package main
import (
"fmt"
"log"
"net/http"
"strings"
)
func request(w http.ResponseWriter, r *http.Request) {
//這些資訊是輸出到伺服器端的列印訊息
徵的就是你 🫵 超ㄅㄧㄤˋ 獎品搭配超瞎趴的四大主題，等你踹共啦！還有機會獲得經典的「偉士牌樂高」喔！馬上來參加本次的活動吧！
隨著理財資訊的普及，越來越多台灣人不再將資產侷限於台股，而是將視野拓展到國際市場。特別是美國市場，其豐富的理財選擇，讓不少人開始思考將資金配置於海外市場的可能性。
然而，要參與美國市場並不只是盲目跟隨標的這麼簡單，而是需要策略和方式，尤其對新手而言，除了選股以外還會遇到語言、開戶流程、Ap
在這篇教學文章中，我們將展示如何使用 Node.js 建立一個簡單的伺服器，並解決常見的跨來源資源共享（CORS）問題，確保伺服器能夠接收並處理來自不同來源的資料。
※ 什麼是Web API
API 就是後端開出來讓前端來用的介面，讓前端與後端可以溝通。
API流程：
終端使用者用任何一種裝置進入瀏覽器。
瀏覽器透過 API 向後端發出請求，請求查詢或修改資料。
後端透過 API 收到前端的請求後，取得資料並回應給前端。
前端渲染畫面，終端使用者
※ 原本狀態：伺服器渲染
這是 MVC 架構下的 request / response 示意圖，在這張圖呈現的架構裡，畫面和資料都由同一個架構處理。
伺服器渲染流程：
瀏覽器針對特定網址送出請求。
路由器解析請求後，轉接給對應的 controller。
controller 按照要求，透過
xhr
在下面的例子裡，我們首先建立了一個 XMLHttpRequest 物件，並使用 .open() 開啟一個 URL，最後使用 .send() 發出 request。
具體來說步驟有四個：
建立XMLHttpReque
開啟一個請求。
送出請求。
拿到回應後去處理畫面要如何呈現。
※ 什麼是 RESTful API？
這種運用 HTTP 來表達語義的路由設計風格稱為 RESTful API，它描述了如何實現 Web API 的架構。所謂的 API 是應用程式介面 (application programming interface)，網址也是一種應用程式的「介面」，故稱為
在API介接中使用x-www-form-urlencoded格式時，可能會遇到一些踩坑的情況，本文分享了作者在這方面遇到的問題和解決方法。
之前在【什麼是網路請求（HTTP response）】筆記裡有提到，網路請求遇到 CORS 跨域問題，在開發時可以透過 vite 的反向代理來解決，那麼什麼是反向代理，有反向代理的話是不是也有正向代理呢?
先前幾篇筆記介紹了網路請求，瀏覽器儲存資料的方式，那麼實務上，前端最常需要發送網路請求的時候，就是透過呼叫 API，去向後端工程師發送/請求資料，所以今天來記錄什麼是 API吧！
Request內容
package main
import (
"fmt"
"log"
"net/http"
"strings"
)
func request(w http.ResponseWriter, r *http.Request) {
//這些資訊是輸出到伺服器端的列印訊息