Angular结合Firebase应用PC端正常 移动端无法写入Firebase存储数据

一、Angular Bootstrap模态框相关兼容性验证 #

你提到提交逻辑放在Bootstrap Angular模态框中，这是高频问题来源，优先排查：

• 验证提交事件是否正常触发：iOS Safari对非<button>标签绑定的click事件存在特殊冒泡逻辑，若你的提交按钮是自定义div/span元素，可能出现事件未触发的情况，可在提交函数开头加打印日志，通过Safari移动端远程调试工具确认触发时是否有日志输出。
• 检查表单状态更新逻辑：如果你的提交按钮绑定了[disabled]="!form.valid"逻辑，iOS自带输入法输入内容时，部分场景不会主动触发Angular表单的值更新回调，导致表单始终处于invalid状态，不会执行后续提交逻辑，可在输入框的input事件中手动调用form.updateValueAndValidity()强制刷新表单状态验证。
• 测试模态框外提交逻辑：直接在业务页面加一个不在模态框内的测试提交按钮，硬编码写入测试数据到Firebase，若能写入成功则可确定问题出在模态框相关逻辑，和Firebase本身无关。

二、Firebase 移动端适配排查 #

如果排除模态框问题，可按以下方向排查Firebase侧问题：

• 查看移动端运行时报错：将iPhone连接Mac，通过Safari开发者工具的远程调试功能，查看写入操作时控制台的报错信息、网络请求状态：
  • 若返回403：优先检查CORS配置是否覆盖了移动端访问的域名/IP，其次确认用户iPhone的「阻止跨站跟踪」隐私设置是否开启，该设置会拦截Firebase鉴权所需的第三方Cookie，导致无写入权限。
  • 若无请求发出：检查是否存在网络层面的拦截，部分运营商网络、内网会屏蔽Firebase相关服务，可切换不同运营商的移动网络重试。
• 升级Firebase SDK版本：旧版本Firebase JS SDK在iOS 14+的Safari环境存在已知的写入兼容问题，升级到最新稳定版SDK可规避大部分底层适配问题。

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