在 Nuxt.js 中使用 useFetch 从 Django REST API 获取数据失败：重新加载和代码编辑时的不同行为

Question

我正在使用 Nuxt.js 进行开发，并尝试从 Django REST API 获取数据。我在使用以下代码时遇到了几个问题：

<template>
    <div>
        {{ posts }}
    </div>
</template>
<script setup lang="ts">
const { data: posts, pending, error, refresh } = await useFetch('https://localhost:8000/api/posts/')
console.log(posts, error)
</script>

以下是我面临的问题：

1. 使用

   useFetch

   从 Django REST API 检索数据时，会发生错误。具体输出如下日志：

   Proxy(Object) {mountains: Error: [GET] "https://localhost:8000/api/posts/": <no response> fetch failed at createError (…}

2. 如果我在页面显示时编辑并保存 Vue 代码，数据会正确加载，并且我可以在服务器日志中看到请求。

3. 但是，当我重新加载页面时，数据未加载。服务器日志中没有该请求的记录。

4. 如果我将 URL 更改为

   https://fakestoreapi.com/products

   ，即使在页面重新加载时也会正确获取数据。

您能否建议一下为什么页面重新加载时无法加载数据以及如何解决此问题？另外，如果您对为什么使用不同的 URL 不会出现问题有任何见解，那将非常有帮助。

添加

我发现错误返回状态代码500。但是Django服务器没有任何请求日志。我怎样才能进行更多调查？

    yTUHiJnnBc: FetchError: [GET] "https://localhost:8000/api/posts/": <no response> fetch failed
        at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
        at async $fetchRaw2 (file:///Users/main/project/mynuxt/node_modules/ofetch/dist/shared/ofetch.00501375.mjs:228:14)
        at async $fetch2 (file:///Users/main/project/mynuxt/node_modules/ofetch/dist/shared/ofetch.00501375.mjs:261:15)
        at async setup (/Users/main/project/mynuxt/pages/blog/index.vue:14:216) {
      cause: [TypeError],
      statusCode: 500,
      fatal: false,
      unhandled: false,
      statusMessage: undefined,
      data: undefined,
      __nuxt_error: true
    }
  },
  _key: 'yTUHiJnnBc',
  _defaultValue: undefined,
  __v_isRef: true

Django 服务器日志。

[24/Dec/2023 15:03:28] "GET /api/posts/ HTTP/1.1" 200 304

它来自编辑后的代码。 2号

---

我使用以下代码配置后端并发出请求。结果和上面一样，重新加载时没有向服务器发送请求。前端请求的状态码是500，Nuxt和Django之间有兼容性问题吗？

def test_view(request):
    return JsonResponse({'message': 'Hello, World!'})

---

我发现从 Nuxt 后端向自签名 https 服务器发出请求时重现了该问题。

服务器/api/posts.js

export default defineEventHandler(async (event) => {
    const data = await $fetch('https://localhost:8000/api/posts/')
    return data
})

环境

• 节点v20.10.0
• npm 10.2.3
• MacOS 13.6（22G120）
• Python 3.11.5
• Django==4.2
• django-sslserver==0.22
• djangorestframework==3.14.0

Answer 1

因此，由于您使用带有 SSL 的 localhost，我假设您也在使用 SSR，因此刷新失败的原因是因为它正在运行服务器端，而 hmr 刷新只会运行客户端，因此它可以工作。至少那是我刚刚遇到的。

尝试将其添加到您的 .env 中，这对我有用。

NODE_TLS_REJECT_UNAUTHORIZED = 0