LaravelとVue.jsの環境で遷移先でリロードした後にPOSTのAPIを叩くと419エラーになる

Question

開発環境

ツール	バージョン
Laravel	8.68.1
Vue.js	2.6.14

その他ツール
componentでのHTTPクライアント : axios

エラー発生手順

LaravelとVue.jsでSPAの掲示板的なWEBサービスを作成しています。
画面はホーム画面と、個別画面の２つがあります。

ホーム画面には、タイトル一覧が並んでいます。
クリックすると、コメントができる個別画面に遷移します。

ここで、遷移したすぐの状態ならコメントができるのですが、
個別画面から、ブラウザをリロード（更新）をした後にコメントをすると、419エラーが発生します。
componentからのpostはaxiosでaxios.postを使用しています

Request Method: POST
Status Code: 419 unknown status

考えられること

csrf-tokenの不一致
ホーム画面にアクセスした時に、以下のようにheadタグにcsrf-tokenが作成され、
ページ遷移後もこの値は変わりません

<meta name="csrf-token" content="dfdasfaaaq06jOqqPeFm11T2o3rDyBPnea1E8t">

しかしブラウザのリロード（更新）をすると、このcsrf-tokenの値が変化しました。

ホーム画面で更新して変化した場合、遷移後の個別画面でも問題なくPOSTのAPIを叩くことができましたが、
遷移後の個別画面で更新して変化した場合、POSTのAPIを叩くと419エラーが発生します。
このtokenの参照や照合が怪しいと調べているのですが、解決方法が分からず。

cookieやsession、token周辺の知識が乏しいため、どうかご教授いただけないでしょうか。
何卒宜しくお願いいたします。

追記

axios.postを使用しています
ルーティングはapi.phpで、ミドルウェアにapiを設定しています。
さらに、app/Http/Kernel.php の $middlewareGroups にて
App\Http\Middleware\VerifyCsrfToken　を設定していました。

これを外せば、エラーは無くなりPOSTモ通りましたが、CSRFに対して脆弱性が残ってしまいます。
その画面でリロードをせず他の画面から遷移してくればPOSTは通るので不思議です

判明したこととして、エラーになったときはCookiesで
Response Cookiesの　XSRF-TOKEN がありませんでした。
また、エラー1回目のPOSTの時に　testapuri_session　の値もrequestとresponseで違っていました。

リロードせずに、POSTが通るとき

・Request Cookies
|Name|value|Domain|...etc|
|:--|:--:|
|XSRF-TOKEN|AAAAAA|127.0.0.1|...|
|testapuri_session|BBBBB|127.0.0.1|...|

・Response Cookies
|Name|value|Domain|...etc|
|:--|:--:|
|XSRF-TOKEN|CCCCCC|127.0.0.1|...|
|testapuri_session|BBBBB|127.0.0.1|...|

リロードして、エラーになるとき

1回目、Response CookiesにXSRF-TOKENがない、sessionIdも違う
・Request Cookies
|Name|value|Domain|...etc|
|:--|:--:|
|XSRF-TOKEN|AAAAAA|127.0.0.1|...|
|testapuri_session|BBBBB|127.0.0.1|...|

・Response Cookies
|Name|value|Domain|...etc|
|:--|:--:|
|testapuri_session|DDDDD|127.0.0.1|...|

2回目以降、Response CookiesにXSRF-TOKENがない、sessionIdは同じになる
・Request Cookies
|Name|value|Domain|...etc|
|:--|:--:|
|XSRF-TOKEN|AAAAAA|127.0.0.1|...|
|testapuri_session|DDDDD|127.0.0.1|...|

・Response Cookies
|Name|value|Domain|...etc|
|:--|:--:|
|testapuri_session|DDDDD|127.0.0.1|...|

エラーになった時の、httpリクエストとレスポンスなどの情報です

URL: http://127.0.0.1:8000/testpage/1

# General
Request URL: http://127.0.0.1:8000/api/testpost
Request Method: POST
Status Code: 419 unknown status
Remote Address: 127.0.0.1:8000
Referrer Policy: strict-origin-when-cross-origin

# Response Headers
Access-Control-Allow-Origin: *
Cache-Control: no-cache, private
Connection: close
Content-Type: application/json
Date: Tue, 30 Nov 2021 12:54:45 GMT
Date: Tue, 30 Nov 2021 12:54:45 GMT
Host: 127.0.0.1:8000
Set-Cookie: testapuri_session=zMg8dCSHvH4jw5DzxHbva8PIiNDGS2PAqy6gNjvj; expires=Tue, 30-Nov-2021 14:54:45 GMT; Max-Age=7200; path=/; httponly; samesite=lax
X-Powered-By: PHP/7.4.13
X-RateLimit-Limit: 60
X-RateLimit-Remaining: 53

# Request Headers
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: ja,en-US;q=0.9,en;q=0.8
Connection: keep-alive
Content-Length: 17
Content-Type: application/json
Cookie: XSRF-TOKEN=eyJpdiI6IlNSemI4N2...長いので省略; testapuri_session=eyJpdiI6Im4vbjQ0KzAya0JZYmVV...長いので省略
Host: 127.0.0.1:8000
Origin: http://127.0.0.1:8000
Referer: http://127.0.0.1:8000/testpage/1
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "macOS"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36
X-Requested-With: XMLHttpRequest
X-XSRF-TOKEN: eyJpdiI6IlNSemI4N21...長いので省略

# エラー
{message: "CSRF token mismatch.", exception: "Symfony\Component\HttpKernel\Exception\HttpException",…}
exception: "Symfony\Component\HttpKernel\Exception\HttpException"
file: "/Users/username/Desktop/testProject/laravel-app/vendor/laravel/framework/src/Illuminate/Foundation/Exceptions/Handler.php"
line: 389
message: "CSRF token mismatch."

Comments

[ockeghem]

関係するHTTPリクエストおよびHTTPレスポンスを追記してください

[okhead]

情報を追記しました。
恐縮ですが過不足あればご依頼ください。
何卒宜しくお願いします。

Answer 1

このAPIラウトにapiミドルウェアを設定しましたか？

Comments

[okhead]

コメントありがとうございます。
ご明察の通り、ルーティングはapi.phpで、ミドルウェアにapiを設定しています。
さらに、app/Http/Kernel.php の $middlewareGroups にて
App\Http\Middleware\VerifyCsrfToken　を設定していました。

これを外せば、エラーは無くなりPOSTも通りましたが、CSRFに対して脆弱性が残ってしまいます。
リロードをしなければPOSTは通っているので、csrf-tokenの設定タイミングに問題がありそうな気がしています。

[skys215]

「APIはcookieを使わない限り、CSRF対策はあまり必要ない」と検索結果に出てきました。
それ以外の参考リンク：https://watanabe-tsuyoshi.hatenablog.com/entry/2015/03/04/123649

[okhead]

なるほど、ありがとうございます！
参考リンクも拝見させて頂きました。
やはりAPIだとCSRF対策は難しい、APIだから不要論もあるようですね
今回はなぜか解決できたので、とりあえずCSRF対策は入れたままにしておこうと思います
ありがとうございました！

Answer 2

bootstrap.jsにconsole.logを仕込めば、なぜかリクエストが通るようになりました
嘘のようですが、何度も確かめました、摩訶不思議です
Postmanを使ってCSRF対策もできているのを確認しました
おそらくaxiosのバグなのか、Laravelのバグなのか分かりませんが
回答くださった方、回答せずとも時間を割いて考察して頂いた方、誠にありがとうございました。