React调Firebase RTDB发PUT请求被CORS拦截 POST请求正常

• 报错表面提示为CORS拦截，实际触发原因是PUT请求的浏览器预检流程被Firebase实时数据库的安全规则拦截，返回了非200状态码，浏览器会将权限拦截的问题统一归类为CORS策略报错
• 可验证的判断依据：同接口下POST请求能正常完成数据写入，说明Firebase服务本身的跨域策略是全局开放的，不存在单独针对PUT请求屏蔽跨域权限的配置；只有当预检请求（OPTIONS）收到非200响应时，才会抛出这类无明确权限提示的CORS报错

1. 调整Firebase实时数据库安全规则 #

• 进入Firebase控制台对应项目的实时数据库规则配置页，检查posts资源路径下的写权限配置。很多场景下规则仅开放了/posts根路径的POST写权限，没有开放带具体帖子ID的动态路径写权限，就会触发当前报错
• 开发测试阶段的规则配置参考（上线前需根据实际业务鉴权逻辑调整）：

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

2. 修正请求代码的潜在问题 #

• 原代码存在两个容易导致请求异常的细节问题：
  • Firebase Realtime Database的REST接口要求请求路径末尾必须拼接.json后缀，漏掉后缀可能引发接口返回非预期状态
  • 原fetch链式调用未传递响应对象，也未对响应状态做校验，会导致请求正常返回时也无法拿到解析后的数据
• 修正后的核心代码片段：

const submitHandler = e => {
  e.preventDefault();
  const err = validate();
  if(err === false) {
    setFormData(formData)
    const requestOptions = {
      method: 'PUT',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        title: title,
        url: url,
        author: author,
        description: description
      })
    };
    // 路径末尾补充.json后缀
    fetch(`https://blog-d8b04-default-rtdb.europe-west1.firebasedatabase.app/posts/${postName}.json`, requestOptions)
      .then(async response => {
        // 补充响应状态判断
        if (!response.ok) {
          throw new Error(`接口请求失败，状态码：${response.status}`)
        }
        const res = await response.json()
        return res
      })
      .then(data => console.log(data));
    setFormData(initialState);
  }
}

3. 开发环境临时兜底配置 #

• 若暂时不想调整线上数据库规则，可在React项目的package.json中配置开发代理，将Firebase接口请求转发到同源开发服务下，绕开浏览器跨域预检流程
• 代理配置写法示例：

{
  "proxy": "https://blog-d8b04-default-rtdb.europe-west1.firebasedatabase.app"
}

• 配置完成后将fetch请求的全路径替换为本地相对路径/posts/${postName}.json，重启React开发服务即可生效

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