Request failed with status code 419

Hello, I am using vuejs with laravel and keep getting the error Request failed with status code 419 when I make a request

axios configuration:

import _ from 'lodash';
window._ = _;

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.axios.defaults.baseURL = 'http : //localhost:8000/api/';

let token = document.head.querySelector('meta[name="csrf-token"]');

window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;

My code

...

export default defineComponent({
    setup() {
        const username = ref('')
        const password = ref('')
        const router = useRouter()

        const handelLogin = async ()=>{    
            const response = await axios.post('/login',{
                username:username.value,
                password:password.value
            }).catch(err=>console.log(err));
            console.log(response);
        }

        return {
            username,
            password,
            handelLogin
        }
    },
})

The response I'm getting:

POST HTTP: //localhost:8000/api/login 419 (unknown status)
...
Login.vue:23 Error: Request failed with status code 419
    at createError (createError.js:16:15)
    at settle (settle.js:17:12)
    at XMLHttpRequest.onloadend (xhr.js:66:7)