Cookieがブラウザで確認できない＆送れない

Question

Cookieがブラウザで確認できない＆送れないです。

document.cookie =
  "user_id=12345abc; path=/; domain:127.0.0.1; samesite=lax;";

console.log(document.cookie);

setTimeout("location.reload()", 5000);

const csrftoken = Cookies.get("csrftoken");
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://127.0.0.1:8000/app/index/");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("X-CSRFToken", csrftoken);
xhr.send();

とjavascriptのスクリプトに書きました。
そしてブラウザに投げてconsole.log(document.cookie);を確認したのですが、何も表示されていませんでした。
またCookieをhttp://127.0.0.1:8000/app/index/のサーバーに送履帯のですが、送り方がこれで良いのか分かりませんでした。

Answer 1

Cookieがブラウザで確認できない＆送れない

JavaScriptによるCookie操作を過信しないでください。

ストレージとして使えそうに思えますが、１オリジンあたりの Cookie名 + 値 + ディレクティブ はサイズ上限として 数kbyte程度の文字列 になります。

HTTPヘッダでやりとりするのが本来の運用ですので 値 部分はマルチバイト文字を避けるために符号化する必要がある。それ以外にも、留意すべきことが多い仕組みです。

---

Cookie については、他の質問で回答しています。

https://teratail.com/questions/300891#reply-423802

Answer 2

cookieを一つずつ設定すればうまくいくと思います。

document.cookie = "user_id=12345abc;";
document.cookie = "path=/; domain:127.0.0.1;";
document.cookie = "samesite=lax;";

Comments

[AkitoshiManabe]

「ディレクティブをCookie名に指定すれば登録できる」というのは質問者様も本意じゃないと思います。
（確認しきていないのですが）ブラウザが保存しない理由は「保存できないディレクティブ」を指定している為だと思います。