I have tried every post and tutorial, but cant seem toe get this to work.
I seem to login fine ( I think ), but on the AWAIT of login n Redrict to the users table. This is where I get the CORS error.
So im not sure if im missing something, because its not exactly like the other examples I saw.
I have gone through the LARAVEL SANCTUM DOCs, but it seems to be setup just fine on the backend.

CONSOLE

KERNEL.php

class Kernel extends HttpKernel
{
    protected $middleware = [
        // \App\Http\Middleware\TrustHosts::class,
        \App\Http\Middleware\TrustProxies::class,
        \Fruitcake\Cors\HandleCors::class,
        \App\Http\Middleware\PreventRequestsDuringMaintenance::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    ];

    protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

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

    protected $routeMiddleware = [
        'auth' => \App\Http\Middleware\Authenticate::class,
        'auth.basic' => \Illuminate\Auth\Middleware\AuthenticateWithBasicAuth::class,
        'cache.headers' => \Illuminate\Http\Middleware\SetCacheHeaders::class,
        'can' => \Illuminate\Auth\Middleware\Authorize::class,
        'guest' => \App\Http\Middleware\RedirectIfAuthenticated::class,
        'password.confirm' => \Illuminate\Auth\Middleware\RequirePassword::class,
        'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
        'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
        'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    ];
}

CORS.php

'paths' => ['api/*', 'login', 'logout', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,

.ENV

SESSION_DRIVER=cookie
SESSION_LIFETIME=120
SESSION_DOMAIN="localhost:8000"
SANCTUM_STATEFUL_DOMAINS=localhost:3000,127.0.0.1:3000

INDEX.JSX

axios.defaults.baseURL = 'http://localhost:8000/';
axios.defaults.withCredentials = true;
// axios.defaults.headers = {Accept: 'application/json'}
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.post['Content-Type'] = 'application/json';

LOGIN.JSX

const submit = async (e: SyntheticEvent) => {
    e.preventDefault();
    
    const response = await axios.get('/sanctum/csrf-cookie').then(response => {
        axios.post('/api/login',{
            email,
            password
        },{
            xsrfHeaderName: "X-XSRF-TOKEN", // change the name of the header to "X-XSRF-TOKEN" and it should works
            withCredentials: true
        }).then(response => {
            setRedirect(true);
        })
    });
}

if(redirect){
    return <Navigate to="/" />;
}

WRAPPER.JSX This goes around all my other pages. Iver tried this in a few combinations, but always the same…

const Wrapper = (props: any) => {
    const [redirect, setRedirect] = useState(false);
    const [user, setUser] = useState({
        last_name:'none'
    });

    //Here we render the page and then we fetch the current user
    // useEffect with []
    useEffect(() => {
        (
            async () => {
                try {
                    // const {data} = await axios.get('/api/user');

                    const {data} = await  axios.get('/api/user', {
                            xsrfHeaderName: "X-XSRF-TOKEN", // change the name of the header to "X-XSRF-TOKEN" and it should works
                            withCredentials: true
                        });

                    console.log("USER",data);

                } catch (e) {
                    console.log("e",e);
                    setRedirect(true);
                }
            }
        )();
    },[]);

    if(redirect){
        return <Navigate to="login" />;
    }

    return (
        <>
            <Nav/>

            <div className="container-fluid">
                <div className="row">
                    <Menu/>
                    <main className="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                        {props.children}
                    </main>
                </div>
            </div>
        </>
    )

}

export default Wrapper

COOKIES