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

await axios.get('apiのエンドポイント', { withCredentials: true });

• Access-Control-Allow-Credentials - MDN Web Docs
• Access-Control-Allow-Origin - MDN Web Docs
• cors - npm package

  import cors from 'cors';
  const app = express();
  app.use(cors({ origin: true, credentials: true }));