Next 14中Fetch获取数据后无法解析为JSON的问题求助

问题根源 #

核心问题是fetch实际接收到的响应是纯文本"Hello World!"，而非Postman中看到的JSON结构，常见原因包括：

• 请求的根路径https://nisa-backend-dev.onrender.com/返回的是后端默认首页文本，而非API接口的JSON响应
• 后端根据请求的Accept头返回不同内容，Axios默认携带Accept: application/json，但Next.js服务器组件中的fetch未自动添加该头
• Next.js的fetch缓存了之前错误的响应内容

解决步骤 #

1. 确认API端点URL正确性

检查NEXT_PUBLIC_BASE_URL是否指向正确的API接口，通常后端API不会直接挂载在根路径下。例如修改为具体的API子路径：

const NEXT_PUBLIC_BASE_URL = "https://nisa-backend-dev.onrender.com/api/init"; // 替换为实际API端点

2. 显式添加Accept请求头

强制后端返回JSON格式，在fetch请求中添加指定头：

export const getInit = async () => {
    try {
        const res = await fetch(NEXT_PUBLIC_BASE_URL, {
            headers: {
                'Accept': 'application/json', // 明确要求JSON响应
            },
        });
        if (!res.ok) { // 简化状态判断，res.ok覆盖所有2xx状态码
            throw new Error(`请求失败：${res.status}`);
        }

        return res.json();
    } catch (err) {
        throw new Error('获取数据失败');
    }
}

3. 调试实际响应内容

在解析JSON前先打印响应文本，确认真实返回内容：

export const getInit = async () => {
    try {
        const res = await fetch(NEXT_PUBLIC_BASE_URL);
        const rawText = await res.text();
        console.log('实际响应内容:', rawText); // 查看真实返回值
        if (!res.ok) {
            throw new Error(`请求失败：${res.status}`);
        }
        return JSON.parse(rawText); // 手动解析便于调试
    } catch (err) {
        throw new Error('获取数据失败');
    }
}

4. 清除Next.js fetch缓存

如果之前的错误响应被缓存，添加配置强制刷新：

const res = await fetch(NEXT_PUBLIC_BASE_URL, {
    cache: 'no-store', // 完全禁用缓存
    // 也可使用 revalidate 控制缓存有效期：next: { revalidate: 0 }
});

额外说明 #

Axios能正常工作是因为它默认携带Accept: application/json请求头，后端会据此返回JSON；而Next.js服务器组件中的fetch默认请求头不包含该字段，导致后端返回了纯文本内容。

内容的提问来源于stack exchange，提问作者Asad Zubair Bhatti