Next.js（axios）とlaravelを使ってhttp通信がしたい（POST、PUT、DELETE）

Question

Next.js Larvelを使用してSPAを開発しています。
LaravelはAPIサーバーとしてREST APIでの値受け渡しをしております。
GETでの値取得はできましたが、POST、PUT、DELETEといった処理がうまく動作しません。
Laraveはのバージョンは8.1を使用しています。
また、ログイン認証関連でsanctumを使用しました。
この辺も影響しているのかな？とも思います。
ご教授いただけますと幸いです。

Next側　

const Axios = axios.create({
  xsrfHeaderName: 'X-CSRF-Token',
  withCredentials: true,
  headers: {
    'content-type': 'application/json'
  }
})
  await Axios
    .put('http://127.0.0.1:8000/api/test/000001', data)
     .then((res) => {
        console.log(res.data)
     })
     .finally(()=>{
       setRegister(false)
       setOpen(false)
     })

Laravel側

Route::apiResource('test', TestController::class);

public function update(EmployeeRequest $request, $id)
    {
        // 更新
        $test = Test::find($id);
        $test->update($request->all());
        return new TestResource($test);
    }

php artisan route:list
 | PUT|PATCH | api/test/{test}   | test.update  | App\Http\Controllers\TestController@update  | api       

'api' => [
            \App\Http\Middleware\VerifyCsrfToken::class,　⇦追加　※追加する前は419エラーが出ていた（内容：csrf token mismatch）
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class, ⇦sanctum使用時に追加
            'throttle:60,1',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

 public function login(Request $request): JsonResponse
    {
        $credentials = $request->validate([
            $this->username() => 'required',
            'password' => 'required',
        ]);

        $credentials = $request->only($this->username(), 'password');

        if (Auth::attempt($credentials)) {
            $request->session()->regenerate();
            return response()->json(Auth::user());
        }

        throw new Exception('ログインに失敗しました。再度お試しください');
    }

当初のエラー

local.ERROR: Session store not set on request. {"exception":"[object] (RuntimeException(code: 0): Session store not set on request

現在のエラー（ブラウザのコンソール）

{message: "CSRF token mismatch."}
　message: "CSRF token mismatch."

記事

• sanctum導入時

https://yutaro-blog.net/2021/09/07/nextjs-laravel-sanctum-spa/

• 419のtoken mismatch が出た時

https://stackoverflow.com/questions/58910214/react-to-laravel-csrf-token-mismatch-error-not-working-even-after-trying-lot

public function login(Request $request): JsonResponse
    {
        $credentials = $request->validate([
            'id => 'required',
            'password' => 'required',
        ]);

        $credentials = $request->only('EM_FIKSID', 'password');

        if (Auth::attempt($credentials)) {
            $request->session()->regenerate();
            return response()->json(Auth::user());
        }

        throw new Exception('ログインに失敗しました。再度お試しください');
    }

const handleClick = () => {
    const Data = { params: { 'id': id, 'password': password }}
    axios
      // CSRF保護の初期化
      .get('http://127.0.0.1:8000/sanctum/csrf-cookie')
      .then((res) => {
　　　　　// ログイン処理
        console.log(res)
        axios
          .post(
            'http://127.0.0.1:8000/login',
            Data,
          )
          .then((res) => {
            console.log(res)
          })
          .catch((err) => {
            console.log(err)
          })
      })
  }

Answer 1

以下の回答が参考になるのではないでしょうか？
https://stackoverflow.com/questions/66048023/laravel-8-sanctum-spa-auth-session-store-not-set-on-request

---

追記
apiのミドルウェアグループに下記のクラスを追加してみてはどうですか？
自分もsanctumを使っていたのですが、下記のクラスたちをapiのミドルウェアグループに追加していました。

            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,

---

さらに追記

下記の記事の認証のところが参考になると思います。
https://www.google.com/amp/s/webxreal.com/laravel-sanctum-spa/%3Famp%3D1
また、↓の記事もわかりやすいです。
https://qiita.com/ucan-lab/items/3e7045e49658763a9566

---

下のやりかたでいけると思います。chromeの開発者モードにしてcookieの中にXSRF-TOKENに保存されているか確認できます

Axios.get('/sanctum/csrf-cookie').then(response => {
      await Axios
    .put('http://127.0.0.1:8000/api/test/000001', data)
     .then((res) => {
        console.log(res.data)
     })
     .finally(()=>{
       setRegister(false)
       setOpen(false)
     })
});

Comments

[tkoide1213]

ご回答ありがとうございます。
記事の通り
\Illuminate\Session\Middleware\StartSession::class
を追加しましたがだめでした。
middlewareGroupsのapiに追加した
\App\Http\Middleware\VerifyCsrfToken::class,
の追加も間違っているようなので削除しました。
どうやら419 token mismatchが解消されていないのがだめみたいです。
api.php からweb.phpに切り替えたらうまくいくみたいな記事もありましたがだめでした、、、
サーバー側とクライアント側のトークンを一致できません、、、

[tkoide1213]

追記ありがとうございます。
追加してみましたがだめでした、、、

[george]

フロントエンドのCSRF tokenを取得する処理はどこでしていますか？

[tkoide1213]

フロントエンド側での処理していないかもしれません。。。
const axiosPost = axios.create({
xsrfHeaderName: 'X-CSRF-Token',
withCredentials: true
})
この処理で全て完結すると思い込んでました。
フロンエンドで取得するcsrf tokenをバックエンドで発行&渡す処理が必要ということであっていますか？？

[george]

発行＆渡す処理が必要だと思います。具体的な仕方は回答に追記したurlをご覧ください。

[tkoide1213]

ご回答ありがとうございます！
上記試してみたのですが、419エラーが解消できませんでした。
開発者モードで確認したところ、１行目のGET部分ではXSRF-TOKENが保存できていたのですが、PUT部分ではXSRF-TOKENが保存されていませんでした。
これが、原因でエラーがおこっていたみたいです。。。
今回とは別でloginの処理をしている部分があるのですが、ここでも同様にPOSTをすると419がでていたのでGETに切り替えました。GETにするとXSRF-TOKENは保存できています。
認証用のテーブルに独自で使用したテーブルを使用しているのですが、これが影響しているのでしょうか、、、
上記にソースを追記しました。ご確認いただけますと幸いです。

[tkoide1213]

エントリポイントに誤りがありました。
× http://127.0.0.1:8000/test
◯ http://localhost:8000/test

[george]

うまくいったようで何よりです。