incorrect request to the server (nuxt3 with useFetch)

Question

i want receive email and password and later route to next page if correct request, but i get 200 in network but my response no success and i dont have response. How can i fix it? i wanted to see what the problem and console log my error and i get Error: [object Object]

<template>
   <div class="form-block" id="form">
    <div class="form-block__bg">
      <img src="~/assets/images/form-background.png" alt="form image">
    </div>
    <form class="form" @submit.prevent="submitForm">
      <p class="form__title">Вход</p>
      <div class="form__text-inputs">
        <div>
          <TextField type="text" v-model="model.email" id="email" label="Логин" required />
        </div>
        <div>
          <TextField  type="password" v-model="model.password" id="password" label="Пароль" required />
        </div>
      </div>
      <button type="submit" class="form__btn">Войти</button>  
    </form>
    <p v-if="error">{{ error }}</p>
  </div>
  </template>
  
<script setup>
import TextField from '@/components/ui/TextField.vue';
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const model = ref( {
    email : '',
    password :''
}
)
const error = ref('')
  
const submitForm = async () => {
  try {
    const response = await useFetch('https://dev.w-pro.pro/api/auth/login/', {
      method: 'post',
      body:{
        email: model.value.email,
        password: model.value.password,
      } 
     
    })

    if (response.ok) {
      const responseData = await response.json()
      console.log(responseData)

      if (responseData.success) {
        // Перейти на другую страницу после успешного запроса
        await router.push('/profile')
        console.log('success')
      } else {
        console.log('Данные не найдены. Пожалуйста, проверьте вашу информацию.')
      }
    } else {
      throw new Error(response.status)
    }
  } catch (e) {
    console.error('Error:', e); // Log the error message
    console.error('Response Status Code:', response.status); // Log the response status code
    console.log( 'Произошла ошибка при отправке запроса на сервер.')
  }
}
  </script>

Answer 1

Wrap your responseData in a JSON.stringify so you can see what is inside.

I dont use vue, but im assuming your model is empty, with empty strings, i would also console.log your model before you submit your form.

Answer 2

Actually You have the response but You couldn't get it. You can get response data like this: response.data. Or, better, destructure response like this:

const { data: response, error } = await useFetch()
if (response.value) {
  // Перейти на другую страницу после успешного запроса
  // success
} else {
  // ...
  console.log(error.value)
}

You can also destructure error to see errors, if any, as indicated in the docs