質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

Q&A

0回答

2391閲覧

Cookieが送信されない

mickey

総合スコア27

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

0グッド

0クリップ

投稿2019/02/23 01:06

編集2019/02/23 02:42

前提

クライアントサイドにNext.js、APIサーバーにDjangoを使用しています。
Next.js: 127.0.0.1:3000
Django: 127.0.0.1:8000

発生している問題

クライアントからAPIにaxiosを用いてGETリクエストを送る際、cookieが付与されない。
このcookieはAPIサーバーによってセットされたものでhttpOnlyとしてブラウザに保存されています。

該当のソースコード

下記のようにGETリクエストを投げます。

const auth = axios.create({ baseURL: 'http://127.0.0.1:8000/api/v1/auth', headers: { 'Content-Type': 'application/json' }, withCredentials: true }) const { data } = await auth.get('/test/')

一方リクエストを受け取るAPIの設定は以下の通りです。

CORS_ORIGIN_ALLOW_ALL = False CORS_ORIGIN_WHITELIST = ( '127.0.0.1:3000' ) CORS_ALLOW_CREDENTIALS = True

ブラウザに保存されているcookieです。
イメージ説明

試したこと

まずAPIサーバーがリクエストを受信できているのかということを確認するために

const { data } = await auth.get('/user/', { headers: { Cookie: `token=${token}` } })---

ブラウザにあるcookie storage内のtokenを取得後、ヘッダーに手動でのせてリクエストを送信したところ、API側でrequest.COOKIESに入っているのが確認できました。

また念の為、Postmanを用いてNext.jsを介さずにAPIにリクエストしたところAPIでcookieを取得できていました。ちなみにこのときは手動でヘッダータブからCookie項目を追加してcookieの追加を行ったのではなく、すでにセットされてあるcookieを使用して行いました。

axiosの設定に問題があるのかと思いましたが、調べて出てきたwithCredentialsの設定やaxiosではなくfetch、isomorphic-fetch、isomorphic-unfetchそれぞれのfetchを試してみましたがだめでした。

chromeのnetworkタブでGETリクエストした際の結果がこちらです。
イメージ説明

タイトルはcookieが送信されない、となってますがこの画像を見る限りCookie: token=52e... となっているので送信はされていると考えてます。


追記:
PostmanとaxiosのそれぞれでGETリクエストを送信し、django側でrequest.METAに入っていたものを比較してみました。以下抜粋ですが、やはりaxiosの場合はcookieの項目がありませんでした。

Postman 'HTTP_CACHE_CONTROL': 'no-cache', 'HTTP_POSTMAN_TOKEN': '9077175d-4da7-4196-b2c6-3ef0b04568f9', 'HTTP_USER_AGENT': 'PostmanRuntime/7.6.0', 'HTTP_ACCEPT': '*/*', 'HTTP_HOST': '127.0.0.1:8000', 'HTTP_COOKIE': 'token=179780f7ca388ae1dec47f5dee717a4b7cb5848e0c21b68b2a5715e62115570b', 'HTTP_ACCEPT_ENCODING': 'gzip, deflate', 'HTTP_CONNECTION': 'keep-alive' axios 'HTTP_ACCEPT': 'application/json, text/plain, */*', 'HTTP_USER_AGENT': 'axios/0.18.0', 'HTTP_HOST': '127.0.0.1:8000', 'HTTP_CONNECTION': 'close'

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

urbainleverrier

2019/02/24 18:04 編集

回答が付いていなかったので。 Django使ったことがないので、回答できないですが、おそらくクロスドメインの問題だと思います。 Django側でクロスドメインの設定を調べてみてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問