使用Axios與Express進行登入驗證實作

在前端project中新增一個api.js的檔案，並建立function login()

記得要在Anxios的config中設定withCredentials: true才能在收到server response時自動設定cookie值，若withCredentials預設為false，則前端發出的request headers將不會帶上Set-Cookie:

後端使用express 4.16.1實作，在server.js中引用cors 及 cookieParser

注意：

1. corsOptions中的origin需包含前端的網域( 這個例子中是http:// localhost: 3002)
2. corsOptions中設置credentials: true，由於前面已在前端中設定了withCredentials: true，則server端若無設定credentials: true的話，server回傳的response headers會缺少Access-Control-Allow-Credentials:true這個標頭，會被瀏覽器拒絕response。

缺少Access-Control-Allow-Credentials:true

再於 route/login.js 的router.post(‘/’, async function(req, res, next){...})中設定res.cookie()就可以在 http://localhost:3000/api/login 的 response中夾帶cookie

注意：

1. httpOnly設為true，則前端就無法使用javascript取得和修改cookie 值。
2. secure : 若為true則cookie只有在透過https協議時才能傳送。
3. sameSite：若為true則cookie在前端會被限制為僅有在前端第一方網域發出的 request才能附帶對應的cookie，第三方網域發出的request無法附帶我們第一方的cookie。

以上兩部分設定好後從前端呼叫login(user_name, password)：即對http://localhost:3000/api/login 發出一個post request，便可以從server端成功取得cookie及內含的JWT(用於User Authentication)。

至此就已成功登入，之後前端發送任何需要User Authentication的request時，server可以從req.cookies中取得所需的JWT進行驗證並提供服務。

參考資料：

你所不知道的各種前端 Debug 技巧系列 [Day 26] Cookies — SameSite Attribute

跨來源資源共用（CORS） - HTTP | MDN