cookieにトークンが保存されない

Question

前提・実現したいこと

angularでバックエンドから取得したトークンをcookieに保存したい

エラーは出ていないのですが、なぜか保存されずに手を打ちようがなくなってしまったので解決法を質問したいです

該当のソースコード

this.http.post(`http://127.0.0.1:8000/api/login/`, body, { observe: 'response' })
      .subscribe(res => {
        const token = res.headers.get('access_token')
        this.cookieService.set('access_token', token);
      });

試したこと

this.cookieService.set('access_token', token);

の部分をres =>{}の外に記述してみました。そうすると変数tokenはないですと返ってきました。

補足情報（FW/ツールのバージョンなど）

バックエンドはlaravelでapiを使ってます

追記

Answer 1

res.headers.get('access_token') というコードからはHTTPヘッダから access_token を取り出そうとしているように見えますが、おそらく access_token はHTTPヘッダ名ではないはずです。レスポンスの形式がどのようなものなのかは分かりませんが、それが原因ではないでしょうか。
該当箇所にブレークポイントを入れてデバッグしてみるか、console.logで token や res を出力してみるといいと思います。

Comments

[sagitarou]

回答ありがとうございます。画像を質問の方に追記いたしました。画像の通りresponse headerにaccess_tokenとあるので名前は合ってると推測しているのですが、ここではないのでしょうか

[kazatsuyu]

ありゃ、そうでしたか。
HTTPヘッダにアンダースコアを使う慣習がない（昔のCGI時代にアンダースコア入りのヘッダを無視するサーバーがあった）のでヘッダーではないのではと早合点しましたが、実際にヘッダーに含まれているならそこが原因ではないですね……。（とは言え一般的なやり方とは言えないと思うのでバックエンドもおかしな部分がありそうですが多分関係はない）

`subscribe` に渡した関数内で
const token = res.headers.get('access_token')
console.log(token)
this.cookieService.set('access_token', token);
console.log(document.cookie)

などを実行した結果を見ればどこが原因か多少分かりそうです。

あとは
document.cookie=`access_token=${token}`
とやってみて結果を見比べるなども有効な気がします（これがうまく行ったとしても実際にそのまま利用するのは良くないのでデバッグ用途だと思ってください）

[sagitarou]

ありがとうございます。
回答の通りにやってもうまくいかなくて、しっかり見直すと関係ないと思っていたエラーが原因でした...
しかもそのエラーの原因がまさかのバックエンド側でした。本当にご迷惑おかけしました。ありがとうございました。