章節連結
雖說前端的開發工具如 vue-cli, vite… 等都已經有內建 dev Server 來幫助你解決 CORS 問題，但這回想說用 nginx 來達成一樣的效果，卻遇上了各種設定盲點和語法不熟所導致的摸索時間增加。因此筆記下摸索的小成果。
內容
Nginx
透過 docker-compose 的設定檔，來讓啟用 nginx 變得更加方便。這邊推薦使用輕量化的 OrbStack 來取代繁重的 Docker Desktop。
重點
前端網頁端對於後端伺服器發起一個跨域請求，我們是透過 docker 所起的 nginx 轉送。這時會有兩種情況：
1. 帶有 preflight 的 OPTIONS 請求
2. 無論何種請求都會由 docker nginx 的內部 port 80 回傳的內容
這兩種情況都需要補上 Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers…等來驗證跨域請求。如果沒有加上的話，會讓瀏覽器端無法存取報錯。
Docker-Compose
重點
1. ports 的欄位以 8080: 80 為例，代表在開發環境下的前端原始碼中要帶入 localhost:8080。 nginx.conf 設定檔中對應要監聽的 port 是 80。
2. docker-compose up –build -d 其中的 –build 很重要：若你沒有加上 –build 參數，那你的修改就不會被重新打包。因此啟動時都建議加上 –build 以確保你的每次修改都可以被看見。
