SPA CSRF token mismatch. が解決できない

前提

Laravel 8とReact 18 でログイン機能を作っています。

フロントはvite環境でhttp://127.0.0.1:5173/loginからログインしようとしています。
Laravel 側はDockerで80ポートです。Fortify と Sanctamを利用しています。
ログイン画面からDBに登録してあるユーザー情報でログインしようとすると発生します。

実現したいこと

CSRF token mismatch. の解消

該当のソースコード

javascript
1const Login = () => {
2  const login = useLogin()
3  const [email, setEmail] = useState('test@testapi.com')
4  const [password, setPassword] = useState('123456789')
5
6  // フォームログイン時に実行される関数
7  const handleLogin = (e: React.FormEvent<HTMLFormElement>) => {
8    e.preventDefault()
9    login.mutate({ email, password })
10  }
11
12略...

AuthQuery.tsx

javascript
1
2import * as api from "../../api/auth/AuthApi"
3
4const useLogin = () =>{
5    return useMutation(api.login,{
6        onSuccess:(user)=> {
7            console.log(user);
8        },
9        onError:() => {
10            toast.error("ログインに失敗しました")
11            
12        },
13    })
14}
15
16略...

AuthApi.tsx

javascript
1const apiClient = axios.create({
2  xsrfHeaderName: 'X-CSRF-Token',
3  baseURL: 'http://localhost:80',
4  withCredentials: true,
5  headers: {
6    'Accept': 'application/json',
7    'content-type': 'application/json'
8  }
9});
10const login = async ({email,password}:{email:string,password:string}) => {
11  await apiClient.get('sanctum/csrf-cookie')
12  const {data} = await apiClient.post<User[]>('api/login', { email, password })
13  return data
14}
15
16export {login}

env
1APP_NAME=Laravel
2APP_ENV=local
3APP_KEY=XXX
4APP_DEBUG=true
5APP_URL=http://localhost
6
7LOG_CHANNEL=stack
8LOG_DEPRECATIONS_CHANNEL=null
9LOG_LEVEL=debug
10
11DB_CONNECTION=mysql
12DB_HOST=mysql
13DB_PORT=3306
14DB_DATABASE=laravel
15DB_USERNAME=root
16DB_PASSWORD=XXX
17
18SESSION_SECURE_COOKIE=true
19SANCTUM_STATEFUL_DOMAINS=http://127.0.0.1:5173/
20SESSION_DOMAIN=127.0.0.1
21
22BROADCAST_DRIVER=log
23CACHE_DRIVER=file
24FILESYSTEM_DRIVER=local
25QUEUE_CONNECTION=sync
26SESSION_DRIVER=cookie
27SESSION_LIFETIME=120
28
29MEMCACHED_HOST=127.0.0.1
30
31REDIS_HOST=127.0.0.1
32REDIS_PASSWORD=null
33REDIS_PORT=6379
34
35MAIL_MAILER=smtp
36MAIL_HOST=mailhog
37MAIL_PORT=1025
38MAIL_USERNAME=null
39MAIL_PASSWORD=null
40MAIL_ENCRYPTION=null
41MAIL_FROM_ADDRESS=null
42MAIL_FROM_NAME="${APP_NAME}"
43
44AWS_ACCESS_KEY_ID=
45AWS_SECRET_ACCESS_KEY=
46AWS_DEFAULT_REGION=us-east-1
47AWS_BUCKET=
48AWS_USE_PATH_STYLE_ENDPOINT=false
49
50PUSHER_APP_ID=
51PUSHER_APP_KEY=
52PUSHER_APP_SECRET=
53PUSHER_APP_CLUSTER=mt1
54
55MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
56MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
57

cors.php

php
1 'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
2        '%s%s',
3        'localhost,localhost:80,localhost:3000,127.0.0.1:5173,127.0.0.1,127.0.0.1:8000,::1',
4        env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
5    ))),

sanctam.php

php
1    'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
2        '%s%s',
3        'localhost,localhost:3000,127.0.0.1:5173,127.0.0.1,127.0.0.1:8000,::1',
4        env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
5    ))),