Chrome密码自动填充异常：多环境React应用仅单环境自动填充密码求助

背景：基于React的Web应用部署在测试、预发布、开发、生产等多环境中，仅URL不同、代码完全一致，且各环境均已保存用户名和密码。但目前仅一个环境能自动填充密码，其他环境需聚焦密码字段后才弹出保存密码的提示。

以下是可能的原因及排查方向：

• Chrome密码管理器的站点匹配细节
  Chrome的密码匹配不仅看顶级域名，还会校验完整的子域名、协议及是否存在重定向。可以打开chrome://settings/passwords查看各环境保存的密码条目，确认条目中的“网站”地址和当前环境的URL是否完全一致（比如是否有HTTP/HTTPS的历史记录差异，或者子域名前缀/层级不同）。另外检查环境是否存在额外的301/302跳转，这可能导致Chrome识别的实际登录域名与保存密码的域名不匹配。

• 模态框的渲染时机差异
  Chrome的自动填充逻辑会在页面初始DOM加载时扫描表单字段。如果不同环境下，登录模态框的渲染时机不同——比如某个环境页面加载完成后立即渲染模态框，而其他环境依赖异步接口返回后才渲染，就会导致Chrome初始扫描时找不到密码字段，只有聚焦后才触发二次检测。检查React代码中模态框的触发逻辑：是否在useEffect无依赖项时直接渲染，还是依赖某个异步状态？

• 密码字段的初始可见性
  若密码字段在页面初始化时处于隐藏状态（比如模态框默认关闭，字段display:none），Chrome可能不会扫描到该字段。确认各环境下登录模态框的默认显示状态是否一致，以及密码字段在页面初始渲染时的DOM可见性。

• Chrome站点数据缓存差异
  即便保存的密码数量无异常，Chrome可能对不同环境留存了不同的站点缓存，比如误操作将某个环境标记为“从不保存密码”，或存在旧表单数据干扰。可以在对应环境页面打开开发者工具→Application→Storage→Clear site data，清除后重新登录保存密码，再测试自动填充行为。

• 受控组件的初始状态
  检查密码字段作为受控组件的初始value是否为空（""或undefined），若某些环境下初始值非空，Chrome可能不会触发自动填充。同时确认所有环境下密码字段的autocomplete属性均设置为"current-password"，避免动态修改导致的差异。

• 扩展或Chrome设置的干扰
  部分Chrome扩展（如密码管理、广告拦截工具）可能对不同环境应用不同规则，或者Chrome设置中某些环境被排除在自动填充之外。尝试用隐身模式测试所有环境（排除扩展影响），同时检查chrome://settings/passwords中的“从不保存的网站”列表是否包含相关环境域名。

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