Quiero que mi aplicación de una sola página (Vue 3/Quasar 2) invoque una solicitud de cierre de sesión en mi backend basado en Spring.

Mi primer enfoque fue usar una solicitud de axios cuando se hizo clic en el icono de cierre de sesión:

 axios.post('http://localhost:8500/logout');

Sin embargo, esto no funciona porque las solicitudes de AJAX se encuentran con un problema de CORS al seguir los redireccionamientos. Parece que Spring requiere que esto sea un formulario POST iniciado por el navegador para funcionar correctamente.

Así que cambié mi código SPA a esto:

 <q-form action="http://localhost:8500/logout" method="post" ref="logoutForm" > <q-icon name="o_logout" size="sm" @click="logout" /> </q-form>

Pero tengo problemas para llamar al evento de envío del submit en el método de cierre de logout() cuando se hace clic en el icono.

Actualización 1

Aquí está el fragmento de código:

 import { defineComponent, ref } from 'vue'; export default defineComponent({ name: 'ToolbarElements', setup() { const logoutForm = ref(null); function logout() { ref('logoutForm').submit(); } return {logout, logoutForm }; }, }); </script>

Pero esto me da el siguiente error:

vue__WEBPACK_IMPORTED_MODULE_0__.ref(...).submit is not a function

Actualización 2

Descubrí que usé la ref de manera incorrecta, así que corregí el código para que sea:

 import { defineComponent, ref } from 'vue'; export default defineComponent({ name: 'ToolbarElements', setup() { const logoutForm = ref(null); function logout() { logoutForm.value.submit(); } return {logout, logoutForm }; }, }); </script>

Esto da como resultado un nuevo mensaje de error:

Uncaught (in promise) TypeError: e is undefined