移动端浏览器访问localhost时Geolocation功能失效问题

问题现象 #

使用react-hook-geolocation开发的React应用，在开发机访问localhost:5173时GPS定位功能正常，但通过移动端浏览器访问时完全失效。通过以下调试代码确认权限被拒绝：

navigator.permissions.query({ name: 'geolocation' }).then(result => {
  if (result.state === 'granted') {
    console.log('granted')
  } else if (result.state === 'prompt') {
    console.log('Permissions requested. Waiting for user input...')
  } else if (result.state === 'denied') {
    console.log('You shall not pass!!')
  }
})

问题原因 #

Geolocation这类涉及用户敏感信息的API，浏览器仅允许在HTTPS安全上下文中使用。localhost作为本地开发环境被浏览器特殊豁免，但移动端访问的非HTTPS环境不符合安全上下文要求，因此直接触发权限拒绝。

解决方案 #

• 开发阶段：配置开发服务器以HTTPS协议启动
  • 若使用Vite：在vite.config.js中添加server.https: true配置
  • 若使用Create React App：启动命令改为HTTPS=true npm start
• 生产环境：将应用部署到支持HTTPS的服务器，并配置有效的SSL证书，确保访问地址以https://开头

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