既有專案由於後端是採用 session 認證。為了讓 localhost 的環境可以順暢的接受 set-cookie,除了運用 Chrome 的覆寫 header 的功能外,開啟一台自己的 Proxy Server 專案也是不錯的選擇。這邊筆記下設定的過程以及注意事項。
內容
1. 撰寫路由時,需注意是由上而下比對。因此越嚴格的,要放較為上面。
2. 路由解析的規則是:
若前端專案是打 /api/godemo/user,而你設定其符合 /api/godemo 的路由條件進入。那 pathRewrite 就僅會拿到 /user
3. 若要可以成功傳送 body 資料,那你需要在轉傳時,設置對應的 header { Content-Type: ‘application/json’ } 和 { ‘Content-Length’: Buffer.byteLength(bodyData)}。並且 bodyData 要是 JSON 處理的字串
4. 接收回傳的資料,在原先的 set-cookie 內容裡,加上 SameSite=None; Secure
。這樣一來 localhost 便可在後續的 api 請求中發送 cookie
5. 前端的 localhost 環境,需要加上 https。這點可以用 [指南] 運用 Mkcert 簡易在本地端實現 HTTPS 連線 ( VSCode ) 來達成