Nuxt3中useFetch登录请求200但无响应问题排查求助

问题根源 #

你错误混淆了Nuxt3的useFetch和原生浏览器fetch的返回值：

• useFetch返回的是Nuxt封装后的响应对象，包含data、error、pending等状态属性，不是原生Response实例，直接调用response.ok、response.json()完全不符合它的API规范，这是报错的核心原因。
• catch块里尝试访问response.status，但response是try块内的变量，抛出错误时可能已超出作用域，进一步引发错误。

修复后的代码 #

<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 () => {
  error.value = ''
  try {
    // 解构useFetch返回值，获取数据和错误状态
    const { data, error: fetchError } = await useFetch('https://dev.w-pro.pro/api/auth/login/', {
      method: 'post',
      body: {
        email: model.value.email,
        password: model.value.password,
      },
      // 确保请求在客户端执行（可选，根据需求调整）
      server: false
    })

    // 检查useFetch返回的错误
    if (fetchError.value) {
      throw fetchError.value
    }

    // 获取响应数据
    const responseData = data.value
    console.log('响应数据:', responseData)

    if (responseData?.success) {
      await router.push('/profile')
      console.log('登录成功')
    } else {
      error.value = 'Данные не найдены. Пожалуйста, проверьте вашу информацию.'
      console.log(error.value)
    }

  } catch (e) {
    console.error('请求错误:', e)
    // 处理不同类型错误，给出友好提示
    if (e?.statusCode) {
      error.value = `Ошибка сервера: ${e.statusCode}`
    } else {
      error.value = 'Произошла ошибка при отправке запроса на сервер.'
    }
  }
}
</script>

关键修改点 #

• 解构useFetch返回的data和error属性，遵循Nuxt3官方使用规范
• 移除对原生Response方法的调用，直接通过data.value获取响应数据
• 调整错误处理逻辑，优先检查useFetch返回的error对象，避免作用域问题
• 每次提交前重置error值，防止旧错误信息残留
• 可选添加server: false确保请求在客户端执行（若登录接口不需要服务端渲染）

内容的提问来源于stack exchange，提问作者lily