Nuxt.js 无法从 Django Rest Framework API 检索数据答案

【问题标题】：Nuxt.js can't retrieve data from Django Rest Framework APINuxt.js 无法从 Django Rest Framework API 检索数据
【发布时间】：2026-01-15 10:35:01
【问题描述】：

我正在为我的 Django Rest Framework 后端开发 Nuxt.js/Vue 前端。即使我指定了允许未经身份验证的用户只读的权限，我似乎也无法从我的 API 成功加载数据。

Index.vue

import axios from 'axios'
export default {
  async asyncData({ $axios, params }) {
    try {
      let customers = await $axios.$get(`/customer/`);
      return { customers };
    } catch (e) {
      return { customers: [] };
    }
  },
  head() {
    return {
      title: "Customer list"
    };
  },
  components: {
  },
  data() {
    return {
      headers: [
        {text: 'Name', value: 'name',},
        {text: 'Address', value: 'address',},
        {text: 'City', value: 'city',},
        {text: 'Phone', value: 'phone_one',},
        {text: 'Email', value: 'email',},
      ],
      customers: [],
    };
  },
  methods: {
    deleteCustomer(customer_id) {
      console.log(deleted `${customer.id}`) 
    }
  }
};
</script>

Nuxt.config.js

module.exports = {
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    baseURL: "http://localhost:8000/api"
  },
}

我已验证 API 工作正常，但 Vue 中的客户数组始终为空。 API 位于http://localhost:8000/api/customer，用于检索客户列表。

【问题讨论】：

如果您使用的是 chrome，请执行 CTRL + SHIFT + j 并单击网络选项卡。然后重新加载页面并在网络选项卡上查找请求。它显示了什么？
如果它甚至没有向 DRF 发送请求，那么您需要调试为什么 axios 没有发送它。此外，无论响应如何，您的 DRF python manage.py runserver 0.0.0.0:8000 窗口都会显示一个请求（如果有）。
您可能需要以某种方式设置crossDomain:true 或xDomain: true。
不。如果您在网络选项卡上没有看到请求，那么您甚至还没有向 DRF 发送一个字节。您需要获取 axios 才能发送请求。然后你需要处理 CORS 的东西。目前，根据您的声明"I'm not seeing any requests bound for localhost:8000 (DRF backend), just localhost:3000"，您的 DRF 服务器尚未收到来自您的前端的请求
我解决了这个问题，感谢一百万的帮助。我对 DRF/Django 非常熟悉，但对 Nuxt/Vue 是全新的，所以这当然是一个学习过程。答案贴在下面。

标签： vue.js django-rest-framework nuxt.js

【解决方案1】：

问题出在三个地方。在这两种情况下，语法错误。

第一 return { customers}; 应该是 return { customers: data };

第二从 data() 函数中删除 customers: [] 声明。我想这不是必需的，因为 asyncData 无论如何都会覆盖数据，但是嗯。它有效。

第三将let customers = await $axios.$get(/customer/); 更改为const data = await $axios.$get(http://localhost:8000/api/customer/);

没有必要使用完整的网址，但我想确定一下。

【讨论】：

【解决方案2】：

您无法在 asyncData 函数中以 context 访问 $axios。

你应该像下面这样使用 axios：

await axios.get(`/customer/`);

另一方面，使用$axios.$get() 应该是injected 作为全局上下文。

【讨论】：

感谢您的提示。不幸的是，我的问题仍然存在。客户仍然是一个空数组。