React中navigator.geolocation非localhost访问被Chrome拦截无法授权

问题根因 #

Chrome对地理位置、摄像头、麦克风这类敏感API做了安全上下文限制：只有HTTPS站点、以及默认被加入可信白名单的localhost/127.0.0.1地址，才有权限调用这类API、触发权限申请弹窗。
你遇到的局域网HTTP地址（如http://10.211.55.3:3000）访问时无弹窗、权限设置项锁死无法修改，就是因为普通HTTP的局域网地址不属于浏览器认可的安全上下文，直接被底层拦截，不会走到权限申请流程。

可行解决方案 #

• 开发调试场景：手动指定可信不安全来源
  适合临时在局域网内调试、不想改服务配置的场景：
  1. Chrome地址栏输入 chrome://flags/#unsafely-treat-insecure-origin-as-secure 回车进入实验功能配置页
  2. 将对应配置项的状态从Default切换为Enabled
  3. 在配置项下方的文本输入框中，填入你需要放行的局域网地址，格式为http://10.211.55.3:3000，多个地址用英文逗号分隔
  4. 点击页面底部弹出的Relaunch按钮重启浏览器，重启后访问对应地址即可正常弹出位置权限申请，站点权限设置项也会解锁可调整

  风险提示：该配置会降低对应地址的安全校验等级，仅建议添加本地开发用的可信地址，不要添加未知公网地址。

• 规范适配场景：给开发服务配置HTTPS
  符合浏览器安全规则的长期方案，适配所有访问场景：
  1. 若使用Create React App脚手架，启动时添加环境变量即可开启自签名HTTPS：执行HTTPS=true npm start（Windows系统可先执行set HTTPS=true再运行启动命令），启动后使用https://[你的局域网IP]:3000访问，首次访问时点击「高级」-「继续访问」即可被识别为安全上下文
  2. 若使用Vite、自定义Webpack配置的项目，在devServer配置项中开启https: true，配置自签名证书后即可通过HTTPS地址访问，正常调用地理位置接口
• 虚拟机调试场景：使用端口转发映射到本地localhost
  适合平行虚拟机、远程开发机的调试场景，不需要修改浏览器配置也不需要配HTTPS：
  1. 打开Chrome DevTools，进入设置页开启端口转发功能
  2. 新增转发规则，将宿主机localhost:3000端口映射到目标服务地址10.211.55.3:3000，保存配置
  3. 直接在宿主机访问http://localhost:3000即可，该地址默认在可信白名单内，可正常触发位置权限申请

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