Next.js调用API触发JSON.parse语法错误，求排查解决

这个错误的核心是你调用的/api/clients接口返回的不是合法JSON格式，导致res.json()解析失败。结合你其他接口正常的情况，按以下步骤排查：

• 直接访问http://localhost:8000/api/clients，查看返回的原始内容：如果是HTML错误页、纯文本或者空内容，都会触发这个报错。比如后端接口抛出异常时，常返回错误页面的HTML而非预期的JSON。
• 检查接口响应头：确保Content-Type的值为application/json，如果是text/html这类非JSON类型，哪怕内容看起来像JSON，fetch的res.json()方法也会解析失败。
• 给代码添加状态码校验：当前代码未判断接口请求是否成功，若接口返回400/500等错误状态码时，依然强行解析JSON，自然会触发报错。修改后的代码如下：

const callAPI = async () => {
    try {
        const res = await fetch(`http://localhost:8000/api/clients`);
        // 先校验请求是否成功
        if (!res.ok) {
            throw new Error(`请求失败，状态码：${res.status}`);
        }
        const data = await res.json();
        console.log(data);
    } catch (err) {
        console.log(err);
        // 捕获错误时打印接口返回的原始内容，便于排查问题
        if (res) {
            const rawContent = await res.text();
            console.log("接口返回原始内容：", rawContent);
        }
    }
};

• 校验后端返回的JSON语法：如果接口返回的JSON存在语法错误（比如遗漏逗号、引号不配对、多余尾随逗号等），也会导致解析失败，可使用在线JSON校验工具验证内容合法性。

内容的提问来源于stack exchange，提问作者B. Koenig