使用移动浏览器访问本地主机时地理位置不起作用

Question

我正在使用react-hook-geolocation创建一个react应用程序来获取我的gps位置。当我尝试使用我的开发机器访问时它工作正常（例如：localhost:5173）。

但是当我尝试使用移动浏览器执行相同操作时，它失败了。

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!!')
}

我尝试使用上面的代码进行调试，但我意识到它被拒绝了。然后我从 https://developer.chrome.com/blog/geolocation-on-secure-contexts-only 发现，它解释了一些揭示敏感信息的功能只能在安全网站 (https) 上工作。

Answer 1

因为我无法真正使用 localhost 创建 https（这就是我目前发现的）。我使用端口转发来解决这个问题。我在这里遵循了本指南https://developer.chrome.com/docs/devtools/remote-debugging/local-server/

一旦一切设置正确，瞧！有效！！！

PS：我在设置时曾多次在启用 USB 调试时出错。因此请密切注意这一点。确保您注意到 Chrome 的“远程目标”部分正在显示设备信息，否则它将无法工作。