Cookieの設定について整理しておきます。

初めてのCookieの設定で、なかなかCookieにtokenが格納されなかったのでその原因と解決方法をまとめました。
(2023/07/06)

API構築にはExpressを使用し、Cookie設定にはjsonwebtoken、cookie-parser、corsライブラリを使用した。

・各ライブラリをインストール

ターミナル

npm install jsonwebtoken cookie-parpser cors

Cookieにtokenが格納されなかった原因はクロスサイトが許可されていなかったから...

そこで、フロントエンド側とバックエンド側に以下を加えることで解決しました。

・ Frontend
デフォルトではクロスオリジンが許可されていないので { withCredentials: true }という引数を加えることで、cookieをhttpヘッダに送ることができます。

jsx

await axios.post('url', data, { withCredentials: true });

・ Backend
フロントエンドだけではCorsエラーが出るのでバックエンド側でクロスサイトを許可する必要がある。

js

const corsOptions = {
    origin: "許可したいurl",
    credentials: true,
}
app.use(cors(corsOptions));

以上になります！！