Codeigniter4 403 Forbidden error accessing post route using Axios

I’m using Axios in Vue to access the Codeigniter post route but the request returns a 403 Forbidden. I have seen a few articles that provide guidelines but still get the error.

Below is my code sample.

Register.vue

<script setup>

import axios from 'axios';
import { reactive} from 'vue';

const registerForm = reactive({
   email: '',
   password: '',
   repeatPassword: '',
});


const register = async() => {
    try {
        await axios.post("users/create-account", registerForm );
      } catch (error) {
        console.log(error);
      }
   
}

</script>

main.js

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


axios.defaults.baseURL = 'http://localhost:8080/'
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';

Codeigniter backend
App->Filters->Cors.php

public function before(RequestInterface $request, $arguments = null)
    {
        header("Access-Control-Allow-Origin: http://localhost:5173");
        header("Access-Control-Allow-Headers: X-API-KEY, Origin,X-Requested-With, Content-Type, Accept, Access-Control-Requested-Method, Authorization");
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
        $method = $_SERVER['REQUEST_METHOD'];
        if($method == "OPTIONS"){
            die();
        }
    }
 

App->Config->Filters.php

public $aliases = [
        'cors'     => AppFiltersCors::class, //added this line
];

public $globals = [
        'before' => [
            'cors', //added this line
            // 'honeypot',
            // 'csrf',
            // 'invalidchars',
        ],
        'after' => [
            'toolbar',
            // 'honeypot',
            // 'secureheaders',
        ],
    ];