Cookieを使った認証機能を実装しようとしてCORSでどハマりした時のメモ

前提

• フロントエンド：Nuxt.js →　http://localhost:3000
• バックエンド：Node.js →　http://localhost:4000
• universal-cookieを使う

やりたかったこと

• サーバーで発行されたcredential情報をcookieとして保存すること
• cookieに保存されているcredential情報をサーバーに送付して、それを元に認証機能を実装すること

はまったこと

• クライアントからのリクエストに対して、サーバー側からのレスポンスにSet-Cookieヘッダーを付与することは出来て、ブラウザのdeveloper toolでもSet-Cookieヘッダーがレスポンスにあることを確認出来ているのに、クライアントでcookieがセットされない。

原因

• 原因はCORSの設定。

解決のために参考したリンク（ほんとまじでありがとうございます！）

• なんとなく CORS がわかる...はもう終わりにする。
• XMLHttpRequest.withCredentials - MDN Web Docs

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}));