I want my single page application (Vue 3 / Quasar 2) to invoke a logout request to my Spring-based backend.

My first approach was using an axios request when the logout icon has been clicked:

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

However, this does not work because the AJAX requests run into a CORS issue when following redirects. It seems as if Spring requires this to be a browser-initiated form POST to work correctly.

So I changed my SPA code to this:

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

But I'm struggling with how to call the form's submit event in the logout() method when the icon was clicked.

Update 1

Here is the code snippet:

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'ToolbarElements',
  setup() {
    const logoutForm = ref(null);

    function logout() {
      ref('logoutForm').submit();
    }

    return {logout, logoutForm };
  },
});
</script>

But this gives me the follow error:

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

Update 2

I found out that I used the ref in a wrong manner, so I corrected the code to be:

import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'ToolbarElements',
  setup() {
    const logoutForm = ref(null);

    function logout() {
      logoutForm.value.submit();
    }

    return {logout, logoutForm };
  },
});
</script>

This results in a new error message:

Uncaught (in promise) TypeError: e is undefined