Home > Software design >  Axios post requests are not working with Cordova/Capacitor in Quasar
Axios post requests are not working with Cordova/Capacitor in Quasar

Time:08-31

It's really weird. I opened the dev server of my quasar app and everything works fine. GET requests also work, POST requests also work with my server (Hosted). I use the Axios package to do so. But when I build the app for android using Cordova, only GET requests work, when I test with my phone.

To realize what's happening: I used a ref. So when the app starts the data coming from the GET request is stored in a ref. So if the ref is true the data display in a <p> tag since there is no console option in the mobile app to check the returned data. It's working the data is being rendered from the GET request. I did the same thing to test the POST request, I made a form, and after submit the data is going to the server, and returning back data will be stored in a ref too. I have another <p> tag to render that data (which shows if the ref is true). However this is not happening, the POST request doesn't work at all I checked the PHPMyAdmin in the server too no data has been inserted.

I'm really struggling with this. Really appreciate it if somebody could help me with this. Why POST requests are not working with Cordova after build and only working with the web?. I have attached my code below. Thanks.

<template>
  <q-page >
    <q-form @submit.prevent="registerUser" >
      <q-input
        type="text"
        autofocus
        v-model="userForm.username"
        label="Username"
        color="info"
      />
    </q-form>
    <p v-if="userData">{{userData }}</p>
  </q-page>
</template>

<script setup>
import { ref, reactive } from "vue";

const userData = ref();

const userForm = reactive({
 username: '',
});

const registerUser = async () => {
  await axios
    .post(`urlhere/register_app_user`, userForm)
    .then((response) => {
      userData.value = response.data;
    });
};
</script>

However, this POST request works on the web. But after I build it to android using Cordova it doesn't work. I use Laravel for backend

CodePudding user response:

This is because of the CSRF Token Issue with Laravel.

Simply go to,

app/Http/Middleware/VerifyCsrfToken.php

And In there add 'api/*' inside the protected $except array like this, (This is a quick solution)

protected $except = [
  'api/*'
];
  • Related