前提
- フロントエンド:Nuxt.js → http://localhost:3000
- バックエンド:Node.js → http://localhost:4000
- universal-cookieを使う
やりたかったこと
- サーバーで発行されたcredential情報をcookieとして保存すること
- cookieに保存されているcredential情報をサーバーに送付して、それを元に認証機能を実装すること
はまったこと
- クライアントからのリクエストに対して、サーバー側からのレスポンスに
Set-Cookie
ヘッダーを付与することは出来て、ブラウザのdeveloper toolでもSet-Cookie
ヘッダーがレスポンスにあることを確認出来ているのに、クライアントでcookieがセットされない。
原因
- 原因はCORSの設定。
解決のために参考したリンク(ほんとまじでありがとうございます!)
awaitaxios.get('apiのエンドポイント',{withCredentials:true});
- Access-Control-Allow-Credentials - MDN Web Docs
- Access-Control-Allow-Origin - MDN Web Docs
- cors - npm package
importcorsfrom'cors';constapp=express();app.use(cors({origin:true,credentials:true}));