Fetch请求JSON解析报错，求助Firebase数据库注册表单连接问题

你遇到的Unexpected token '<'错误，本质是fetch请求返回的不是JSON数据，而是HTML内容（通常是404错误页面或权限拦截页面），导致res.json()解析失败。结合你对接Firebase数据库的场景，以下是具体排查和修复步骤：

1. 先确认请求路径（path）是否正确 #

Firebase实时数据库的合法API端点格式必须包含.json后缀，正确格式为：

https://<你的项目ID>.firebaseio.com/<你的集合名称>.json

比如你的项目ID是my-app-12345，要写入users集合，路径应该是：
https://my-app-12345.firebaseio.com/users.json

如果是Firestore数据库，不建议直接用fetch调用REST API，更推荐使用官方SDK（见下文），若坚持用fetch，需严格按照Firestore REST API的路径规则拼接。

2. 给请求添加错误捕获，排查返回内容 #

修改你的代码，先检查响应状态，再捕获非JSON响应的内容，方便定位问题：

const sendData = (path, data) =>{
    fetch(path, {
        method: 'post',
        headers: new Headers({"Content-Type": "application/json"}),
        body: JSON.stringify(data)
    })
    .then((res)=> {
        // 先判断响应是否正常
        if (!res.ok) {
            // 把响应转为文本抛出，查看具体错误内容
            return res.text().then(text => { throw new Error(text) });
        }
        return res.json();
    })
    .then(response => {
        processData(response);
    })
    .catch(err => {
        console.error('请求详情:', err);
    })
}

运行后查看控制台的错误信息，就能知道返回的HTML具体是什么（比如404页面、权限提示等）。

3. 检查Firebase数据库规则配置 #

默认情况下，Firebase实时数据库的规则只允许认证用户读写。如果你是测试注册功能，可暂时开放规则（上线前务必改回严格规则）：
在Firebase控制台→数据库→规则中，修改为：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

4. 更可靠的方案：使用Firebase官方SDK #

直接用fetch调用API容易出错，推荐使用Firebase官方SDK来操作数据库，步骤如下：

第一步：初始化Firebase #

// 先引入Firebase SDK（可通过CDN或npm安装）
import { initializeApp } from "firebase/app";
import { getDatabase, ref, push } from "firebase/database";

// 你的Firebase配置（从控制台复制）
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  databaseURL: "你的DATABASE_URL",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的MESSAGING_SENDER_ID",
  appId: "你的APP_ID"
};

// 初始化App和数据库实例
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

第二步：用SDK写入数据 #

const sendData = (data) => {
  // 指定要写入的集合路径
  const dbRef = ref(database, 'users');
  // 推送数据到集合（自动生成唯一ID）
  push(dbRef, data)
    .then(() => {
      console.log('数据写入成功');
      processData({ success: true });
    })
    .catch(err => {
      console.error('写入失败:', err);
    })
}

SDK会自动处理请求头、路径、认证等问题，比手动写fetch更稳定。

快速排查技巧 #

• 直接在浏览器地址栏输入你的path，查看返回内容，如果是HTML，说明路径100%错误；
• 打开浏览器开发者工具→Network面板，查看fetch请求的状态码（比如404、403）和响应内容；
• 核对Firebase控制台的数据库URL，确保和你使用的path完全一致。

内容的提问来源于stack exchange，提问作者Péresh Basumatary