React注册功能报错：SyntaxError: Unexpected end of JSON input

这个错误的核心原因是后端返回的响应不是有效的JSON格式（可能是空响应、HTML错误页面，或者格式错误的JSON），导致response.json()解析失败。以下是具体的解决方法和排查步骤：

一、修改API客户端代码，增加容错处理 #

直接修改api-clients.ts中的register函数，先获取响应文本再尝试解析JSON，避免解析失败抛出未捕获的错误：

import { RegisterFormData } from "./pages/Register";

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;

export const register = async (formData: RegisterFormData) => {
    const response = await fetch(`${API_BASE_URL}/api/users/register`, {
      method: "POST",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(formData),
    });

    // 先获取响应文本，避免直接解析JSON失败
    const responseText = await response.text();
    let responseBody = {};
    
    // 尝试解析JSON，捕获解析错误
    if (responseText) {
      try {
        responseBody = JSON.parse(responseText);
      } catch (parseError) {
        throw new Error(`服务器返回无效响应: ${responseText.slice(0, 100)}...`);
      }
    }
  
    if (!response.ok) {
      throw new Error(responseBody.message || '注册请求失败，请检查后端服务');
    }
  };

二、排查后端和请求问题 #

• 验证API地址正确性：检查VITE_API_BASE_URL环境变量是否正确，在浏览器开发者工具的Network标签中，查看注册请求的URL是否能正常访问。
• 查看响应内容：在Network标签中找到该POST请求，切换到Response标签，查看后端实际返回的内容：
  • 如果是空内容：说明后端处理成功但未返回任何JSON，此时可以去掉JSON解析逻辑，直接判断response.ok即可。
  • 如果是HTML页面：说明后端抛出了500/404等错误，返回了错误页面，需要检查后端服务是否正常运行，接口路径是否正确。
• 检查CORS配置：如果请求出现跨域错误，后端需要配置正确的CORS规则，允许前端域名的请求。
• 验证请求体格式：确保后端能正确解析JSON格式的请求体，比如Express后端需要配置express.json()中间件。

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