もちろん、料理の話ではなくて、ブラウザに保存されているCookieの話です
概要
現在個人で作成しているWebアプリでログイン周りの実装を行っていました。
開発の環境としては、
・フロントサイド：Reactのlocalhost:3000
・バックサイド：Goのlocalhost:1323
というCORS状態で開発しています。
ログイン認証方式は昔ながらの「ログイン、パスワードを入力してログインを行い、セッションIDをCookieに保存する」方式です。
結論：GoとReactを以下のように修正
Go側の変更
e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
AllowOrigins: []string{"http://localhost:3000"},
AllowHeaders: []string{echo.HeaderOrigin, echo.HeaderContentType, echo.HeaderAccept},
AllowCredentials: true, // ←これを追加
}))React側(axios)の変更
axios.get('http://localhost:1323/',
{ withCredentials: true }) // ← これを追加
.then(res => {
console.log(res.data)
});以上でCookieが保存できるようになりました。これにたどり着くまでに12時間くらいかかった・・・
ヒントにしたのは以下のサイトです。
https://stackoverflow.com/questions/72612730/browser-is-not-saving-cookie
https://stackoverflow.com/questions/43002444/make-axios-send-cookies-in-its-requests-automatically
Go側の設定は無くてもCookieが保存できましたが、以下のようなエラーが発生したため加えています。
以上！
以下、現象について
Cookieがどう頑張っても保存されない
Go + Echoでサーバーサイドを作成していますが、Cookieがどうやっても保存できずハマっていました。
クライアントサイドはReact(Nextjs)です。
EchoのCookieの利用方法はこちらになります。
Cookieのレスポンスは返却されており、有効期間も未来日に設定しているのになぜ？という状態でした。
更におかしいのが「EditThisCookie」の拡張機能からもCookieが作成できないという点。
この場合、自分のプログラムの組み方とは別の場所に問題がありそうな気がします。
問題の切り分け
試しにReactを経由せず、GoのAPIを直接叩いてみたところ無事にCookieが保存されることを確認。
ということで、React経由でアクセスすると上手く行かないことが分かり、そちらの方面で調べてみることにしました。
「react acookie not saved」などと検索して、冒頭で紹介したサイトに行き着いて解決しました。
今更ながらCookie周りについて確認
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/withCredentials
https://qiita.com/kawaz/items/1e51c374b7a13c21b7e2
CORSの環境では上記の設定が必要とのこと・・・
今までCORSの環境でいくつか個人アプリは作っていましたが、実はCookieを利用するのは今回が初めてというところもあり、予定外のところで詰まってしまいました・・・
アプリが完成した場合、本番環境でもCORSの環境になる可能性があるので、開発段階で発見できたのは良かったといえばよかったか・・・
Webアプリ開発は長らくやってきたつもりでしたが、まだまだ勉強不足な部分がありました。
サーバーサイド、フロントサイド、マイクロサービス etc そのような環境でもつまらずに開発が続けられるようになりたい・・・
