React注册表单提交时遇Unexpected end of JSON input错误求助

问题根源 #

1. Vite代理ECONNREFUSED错误：前端通过代理请求/api/auth/signup时无法连接到后端服务，大概率是后端未启动、代理配置的目标地址/端口错误，导致连接被拒绝。
2. Unexpected end of JSON input错误：请求未成功到达后端或后端未返回有效JSON响应，代码强行调用res.json()解析空内容，从而触发该错误。

解决步骤 #

1. 确认后端服务状态

• 检查Node.js后端服务是否已启动，且运行在Vite代理配置的目标端口上（比如配置里的http://localhost:3000，后端必须在3000端口运行）。
• 如果后端未启动，执行对应启动命令（如npm start、node server.js等），确保服务正常运行后再测试注册功能。

2. 检查并修正Vite代理配置

打开项目根目录下的vite.config.js/vite.config.ts，确认代理规则正确：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 替换为后端实际运行的地址+端口
        changeOrigin: true,
        // 若后端路由无/api前缀，需添加路径重写
        // rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

• 确保target的地址、端口与后端服务完全匹配，无拼写错误。
• 如果后端路由没有/api前缀，必须添加rewrite规则，或者调整前端请求的路径。

3. 修复前端fetch的错误处理逻辑

当前代码在请求失败时仍尝试解析JSON，导致报错。修改useSignup中的请求逻辑：

try {
  const res = await fetch("/api/auth/signup", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ fullName, username, password, confirmPassword, gender }),
  });

  // 先判断响应是否成功
  if (!res.ok) {
    const errorInfo = await res.text().catch(() => `请求失败，状态码：${res.status}`);
    throw new Error(errorInfo);
  }

  const data = await res.json();
  if (data.error) {
    throw new Error(data.error);
  }
  localStorage.setItem("chat-user", JSON.stringify(data));
  setAuthUser(data);
} catch (error) {
  toast.error(error.message);
}

这样可以避免在请求连接失败、无有效JSON响应时调用res.json()，从根源解决Unexpected end of JSON input错误。

4. 验证后端路由匹配

确认后端的注册接口路由是否为/api/auth/signup：

• 如果后端路由是/auth/signup，则需要在Vite代理配置中添加rewrite规则移除/api前缀，或者将前端请求路径改为/auth/signup。

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