sanctumで保護されたlaravelのAPIをVue.jsから実行したい

Question

前提

Vue.jsで画面を作成しバックエンドはlaravelのAPIで構築する
SPAのサービスを開発中です

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• sanctumで保護されたlaravelのAPIをVue.jsから実行したい

発生している問題・エラーメッセージ

https://noumenon-th.net/programming/2020/05/26/sanctum/
こちらのページを参考にログイン・ログアウトの機能を作成することはできましたが

api.phpで認証されていないと実行できないように設定したAPIを実行すると401が返ってきてしまいます。

Route::group(['middleware' => ['auth:sanctum']], function () {
    認証されたページで使用するAPI
}

ログイン、ログアウト時のバックエンドの処理

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class LoginController extends Controller
{

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

        if (Auth::attempt($credentials)) {
            return response()->json(['message' => 'Login successful'], 200);
        }

        throw ValidationException::withMessages([
            'email' => ['The provided credentials are incorrect'],
        ]);
    }

    public function logout()
    {
        Auth::logout();
        return response()->json(['status_code' => 200,'message' => 'Logged out'], 200);
    }

}

ログイン時のフロント側で実行する処理

<script>
import axios from 'axios';

export default {
    data() {
        return {
            email: "",
            password: "",
            errors: []
        };
    },
    methods: {
        login() {
            axios.get("/sanctum/csrf-cookie").then(response => {
                axios
                    .post("/api/login", {
                        email: this.email,
                        password: this.password
                    })
                    .then(response => {
                        console.log(response);
                        localStorage.setItem("auth", "true");
                        this.$router.push("/autoFunction");
                    })
                    .catch(error => {
                        this.errors = error.response.data.errors;
                    });
            });
        }
    }
};
</script>

ログアウト時にvueファイルで実行する処理

<script>
import axios from 'axios';

export default {
    data() {
        return {
            user: ""
        };
    },
    mounted() {
        axios.get("/api/getUserInfo").then(response => {
            this.user = response.data;
        });
    },
    methods: {
        logout() {
            axios
                .post("api/logout")
                .then(response => {
                    console.log(response);
                    this.user = "";
                    localStorage.removeItem("auth");
                    this.$router.push("/login");
                })
                .catch(error => {
                    console.log(error);
                });
        }
    }
};
</script>

試したこと

https://maasaablog.com/development/laravel/1011/
こちらのサイトを参考に設定を確認

        'api' => [
            EnsureFrontendRequestsAreStateful::class,
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

    'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
        'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,マシンのIPアドレス:8000,検証環境用ドメイン,::1',
        env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
    ))),

ローカル環境には「http://127.0.0.1:8000/」からアクセスしています

<?php

return [

    'paths' => ['api/*', 'sanctum/csrf-cookie'],


    'supports_credentials' => true,

];

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.axios.defaults.withCredentials = true;

import Axios from 'axios'

const axios = Axios.create({
    baseURL: 'http://localhost:8000',
    headers: { 'X-Requested-With': 'XMLHttpRequest' },
    withCredentials: true
})

export default axios

SESSION_DRIVER=cookie
SESSION_LIFETIME=120
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:8000

他に確認が必要な箇所はどこになるでしょうか？

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

Laravel v8.83.23
PHP v7.4.18
"vue": "^2.5.17",
"axios": "^0.21.4",

Answer 1

ログイン時に発行されるx-xsrf-tokenが
リクエストを投げる際のヘッダーに付与されていないことが原因でした

開発ツールでヘッダーの中身を見てみたところ

set-cookieヘッダーを介してcookieの設定を試みましたがDomain属性が
現在のホストURLに関して無効だったため、ブロックされました

というメッセージが表示されていました。