写入Firestore数据库时出现net::ERR_BLOCKED_BY_CLIENT错误

问题详情 #

在React应用中提交表单数据到Firestore数据库时，触发net::ERR_BLOCKED_BY_CLIENT错误，相关代码及报错信息如下：

请求代码 #

// react app
const referenceDescriptionTextArea = useRef();
const proposalsCollectionReference = collection(db, "proposals");

const handleProposalSubmit = async (event) => {
  event.preventDefault();

  var data = {
    author: getCurrentUser().uid,
    timestamp: Timestamp.now(),
    tokenid: tokenid,
    type: "bio",
    description: referenceDescriptionTextArea.current.value,
  };

  addDoc(proposalsCollectionReference, data).then(
    (docRef) => {
      console.log(docRef.id); //saf89hnasHJADH9
      closeModal();
    },
    (err) => {
      console.log(err);
    }
  );
};

控制台报错 #

channelrequest.js:1086          POST https://firestore.googleapis.com/google.firestore.v1.Firestore/Write/channel?VER=8&database=projects%2FREDACTED%2Fdatabases%2F(default)&gsessionid=sdaf7uOt-NfCFKX32b-Mw3sJBli_ssdsdfkaNw&SID=Q-mrJ98YFSsadflZRPA&RID=20557&TYPE=terminate&zx=pyjwqxvmw7j9 net::ERR_BLOCKED_BY_CLIENT

已尝试的无效方案 #

• 检查并设置Firestore规则，仅允许已认证用户读写：

  match /proposals/{proposal} {
      allow read, write: if request.auth != null;
  }
  

• 本地部署时放宽规则，允许所有人读写：

  match /proposals/{proposal} {
      allow read, write: if true; // on local deployment but not working
  }
  

• 排查广告拦截：使用无扩展Chrome实例及其他浏览器测试，问题依旧。

解决建议 #

1. 检查网络环境限制
   部分企业内网、校园网会拦截Google服务域名，尝试切换到手机热点或其他非受限网络测试，确认是否是网络层面的拦截。

2. 验证Firebase初始化配置
   确保React应用中Firebase的初始化参数（apiKey、authDomain、projectId等）完全匹配Firebase控制台的项目配置，尤其是项目ID是否正确，避免请求发送到错误的数据库地址。

3. 更新Firebase JS SDK版本
   老旧版本的Firebase客户端可能存在兼容性问题，尝试升级到最新稳定版：

   npm install firebase@latest
   

4. 校验用户认证状态
   getCurrentUser()可能在提交时返回null（用户未完成认证流程），在提交逻辑前添加状态判断：

   const handleProposalSubmit = async (event) => {
     event.preventDefault();
     const user = getCurrentUser();
     if (!user) {
       console.log("用户未完成认证");
       return;
     }
     // 原有数据构造及提交逻辑
   };
   

5. 排查本地代理/防火墙
   本地防火墙、VPN或代理软件可能拦截Firestore请求，关闭相关工具后重试。

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