Django+Nuxt3项目启用分页时触发500内部服务器错误求助

第一步：定位具体错误原因 #

500是服务器内部异常，必须先拿到详细报错信息才能精准修复：

• 查看Django运行控制台的日志输出，里面会有完整的报错栈
• 开启DEBUG模式后，直接用浏览器或API工具访问${apiURL}/portfolio，页面会显示具体错误详情，这是最快排查的方式

常见问题及修复方案 #

1. 分页配置冲突 #

你同时在全局settings.py和视图中配置了分页，虽然视图配置优先级更高，但可能存在隐性冲突：

• 临时注释settings.py中的REST_FRAMEWORK分页配置，仅保留视图的自定义分页：

# REST_FRAMEWORK = {
#     'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
#     'PAGE_SIZE': 8
# }

测试是否恢复正常，若正常说明全局配置和自定义分页存在冲突，可选择只保留其中一种配置方式。

2. 自定义分页类实现问题 #

检查PortfolioApiViewPagination的定义：

• 确保已正确导入PageNumberPagination：

from rest_framework.pagination import PageNumberPagination

• 确认类名拼写无误，视图中引用的分页类名称完全匹配

3. QuerySet/序列化器隐性报错 #

未分页时正常，但分页过程可能触发序列化器的隐性问题：

• 临时改用全局默认分页测试，注释视图中的自定义分页类：

class PortfolioApiView(generics.ListCreateAPIView):
    queryset = Portfolio.objects.all()
    serializer_class = PortfolioSerializer
    # pagination_class = PortfolioApiViewPagination

若此时正常，说明自定义分页类存在问题，需重新检查其配置。

后端修复后的前端适配 #

当后端分页接口正常返回数据后，注意分页接口返回的是包含results数组的结构，需调整前端代码：

<script setup>
const { public: {apiURL} } = useRuntimeConfig();
const { data: response, refresh } = await useFetch(`${apiURL}/portfolio`);
const portfolios = computed(() => response.value?.results || []);
</script>

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