在本地网络上测试时使用 geolocation.getCurrentPosition答案

【问题标题】：Using geolocation.getCurrentPosition while testing on local network在本地网络上测试时使用 geolocation.getCurrentPosition
【发布时间】：2020-08-04 15:49:56
【问题描述】：

我正在尝试通过navigator.geolocation.getCurrentPosition 访问我手机的地理位置，方法是通过本地 IPv4 地址连接到本地计算机上托管的网站。问题是，从我的手机运行代码时，我收到错误“Origin 无权使用地理位置服务”。经过研究，我相信我的手机阻止了该浏览器方法，因为我没有通过 HTTPS 或 localhost 访问我的本地网站。

有人知道我可以在本地进行测试吗？我是否必须将开发中的代码发布到使用 HTTPS 的 Web 服务器来进行测试？

任何帮助将不胜感激。提前致谢！

【问题讨论】：

开始认为我只是在泡菜哈哈！我可能不得不求助于将它上传到像 Heroku 这样的服务器，但是我也需要担心弄清楚我的数据库......
您可以使用http-server NPM 包轻松运行本地 HTTPS 服务器。您只需在与您的站点相同的目录中使用openssl 生成您自己的证书，它可以在您本地网站的目录中使用http-server -S -C cert.pem -o -p 80，尽管我怀疑这是问题所在。您是否有任何其他资源通过该页面中的单个 HTTP 提供服务？您应该创建一个仅包含geolocation.getCurrentPosition 代码的简单页面，以便对其进行测试。如果您愿意，我可以提供创建它的步骤。
您当前使用的是哪个本地服务器，Apache？您甚至可以创建自己的证书，并启用该本地服务器使用该证书通过 HTTPS 为站点提供服务。该站点将被 Chrome 标记为不安全，因为您将拥有一个自签名证书，但这不会影响 Geolocation API 的使用，您应该能够对其进行测试。即使使用自签名证书，我在本地服务器使用 HTTPS 服务的 Chrome 桌面/移动设备上测试 Geolocation API 时也没有任何问题。
@ChristosLytras 你能把这个作为答案发布吗？在您的回复和stackoverflow.com/questions/21397809/… 之间，我能够做到这一点。
很高兴你有这个工作达里尔。我已经给出了答案。检查一下，如果需要，甚至可以进行任何更改。

标签： javascript geolocation

【解决方案1】：

您可以使用http-server NPM 包轻松运行本地 HTTPS 服务器。您只需使用 openssl 在与您的站点相同的目录中生成您自己的证书，使用如下方式：

openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

它会通过执行来启动服务器：

http-server -S -C cert.pem -o -p 80

在您本地网站的目录中。注意密钥和证书的文件名，因为http-server 默认密钥文件名是key.pem，当然您可以使用-K <filename> 参数更改它。

您甚至可以将该证书用于其他本地服务器（Apache、Express、Nginx 等）以通过 HTTPS 为站点提供服务使用该证书。该站点将被 Chrome 标记为不安全，因为您将拥有自签名证书，但这不会影响 Geolocation API 的使用，您应该能够对其进行测试。正如您所发现的，您甚至可以信任该自签名证书并将其添加到 Chrome 等浏览器 ("create a trusted self-signed SSL cert for localhost")。

还要检查您是否有任何其他资源通过该页面中的单个 HTTP 提供服务，因为如果存在就会出现问题。您应该创建一个仅包含 geolocation.getCurrentPosition 代码的简单页面，以便对其进行测试。

【讨论】：

【解决方案2】：

如果您在手机上使用 chrome 浏览器，建议使用。然后你可以前往

chrome://flags

并搜索这两个选项并启用它们。

允许从 localhost 加载的资源使用无效证书。

和

不安全的来源被视为安全

【讨论】：

我认为不幸的是，这个答案在 IOS 上不起作用 :( 现在看看我的 chrome 标志，这个不存在。

【解决方案3】：

如果您在手机上使用 chrome，那么您可以为此设置一个标志。

在 chrome 中导航到：

chrome://flags/#unsafely-treat-insecure-origin-as-secure

然后输入您为网站提供服务的地址，chrome 会将其视为安全网站

【讨论】：

我认为不幸的是，这个答案在 IOS 上不起作用 :( 现在看看我的 chrome 标志，这个标志不存在。我对这个答案感到非常兴奋，因为它似乎是完美的解决方案在开发过程中。
你能在IOS上获得chrome beta / chrome dev版本吗？可能不在发布版本中

【解决方案4】：

您需要将您的网站部署到生产服务器，如 heroku、aws 或您选择的任何其他生产服务器，以便您能够获得所需的内容。

您不能在智能手机上运行本地服务器，因为该站点只能在其所在的主机系统上本地运行。

我希望这会有所帮助！

【讨论】：

我不知道这个答案是否完全正确。在 iPhone 上，我可以通过 IPV4 从我的机器本地加载网站。但是，我的问题在于我的本地主机（或本地 IP）不是通过 HTTPS 提供的。我可能会在本地计算机上安装 HTTPS 证书，但这样的证书需要域名，因此我还需要将流量从我的域引导到本地网络。我只是希望并且愿意相信可能有某种方法可以通过测试来解决这个问题。
和我说的一样，你需要通过生产服务器发出一个 http 请求才能得到你真正想要的。