フロントエンドにNext.js、バックエンドにdjangoを用いて開発しているのですが、リクエスト時にブラウザに保存されたcookieがバックエンド側に自動で送信されません。
流れとしては
0. フロントエンドにてユーザーがログインすると、バックエンドからトークンがCookieとしてブラウザに送られてセットされる。(httpOnly属性)
0. ユーザーはこのトークンがあればサーバーがログイン済みと判断、GET・POSTリクエスト等はこのトークンを送信することで可能
という具合ですが、フロントエンドからトークンの入ったCookieが自動でサーバーに送信されないのです。
前提として
フロントエンドであるNext.jsは127.0.0.1:3000、カスタムルーティングのためにExpressを使用しています。
またバックエンドのdjangoは127.0.0.1:8000となっています。
Django側での設定
CORS_ORIGIN_WHITELIST = ( '127.0.0.1:3000' ) CORS_ALLOW_CREDENTIALS = True
Next.js(React)
await axios.get('http://127.0.0.1:8000/api/v1/auth/user/', { withCredentials: true }).then(res => { console.log(res) }).catch(err => { console.log(err.response) })
上記のようにサーバーにGETリクエストを送信した際にブラウザ側に保存されたCookieが自動で送信されるようにしたいです。
ちなみに
await axios.get('http://127.0.0.1:8000/api/v1/auth/user/', { headers: { Cookie: `token=${token}` }, withCredentials: true }).then(res => { console.log(res) }).catch(err => { console.log(err.response) })
このように手動でcookieを付与してあげるとちゃんと期待通りの動きにはなるのですが、あくまで自動で送信されるのが理想です。
またPOSTMANでも試してみましたが、ログイン時に自動的にトークンがcookieにセットされた状態で/user/にGETリクエストを送信したところ、サーバーがcookieを受け取って処理してくれました。
なぜ自動でcookieが送信されないのでしょうか?
最後にExpressの設定です。(こちらはカスタムルーティングのために使用しているのですが、もしかしてここに問題があったりするのでしょうか?)
const express = require('express') const next = require('next') const cookieParser = require('cookie-parser') const cors = require('cors') const dev = process.env.NODE_ENV !== 'production' const app = next({ dev }) const handle = app.getRequestHandler() app.prepare() .then(() => { const server = express() server.use(cors({ credentials: true })) server.use(cookieParser()) server.get('*', (req, res) => { return handle(req, res) }) server.listen(3000, (err) => { if (err) throw err console.log('> Ready on http://localhost:3000') }) }) .catch((ex) => { console.error(ex.stack) process.exit(1) })
ご教授の方お願いいたします。
どうして低評価されたのでしょうか?質問文に問題があったのでしょうか?どれだけ調べていろいろ試してみて結局だめだったので、こうして質問しているのですが問題があるのなら修正するので明記してから低評価していただけませんか?
あなたの回答
tips
プレビュー