javascript - Using geolocation.getCurrentPosition while testing on local network - Stack Overflow

admin 管理员组

文章数量: 1086019

I am trying to access my phone's geolocation via navigator.geolocation.getCurrentPosition by connecting to a website hosted on a local machine via local IPv4 address. Problem is, when running the code from my phone I get the error "Origin does not have permission to use Geolocation service". After researching, I believe my phone is blocking that browser method because I am not hitting my local website over HTTPS or localhost.

Does anyone know of a way for me to test this locally? Do I have to publish my in-development code to a web server with HTTPS just to test this?

Any help would be very appreciated. Thanks in advance!

I am trying to access my phone's geolocation via navigator.geolocation.getCurrentPosition by connecting to a website hosted on a local machine via local IPv4 address. Problem is, when running the code from my phone I get the error "Origin does not have permission to use Geolocation service". After researching, I believe my phone is blocking that browser method because I am not hitting my local website over HTTPS or localhost.

Does anyone know of a way for me to test this locally? Do I have to publish my in-development code to a web server with HTTPS just to test this?

Any help would be very appreciated. Thanks in advance!

• javascript
• geolocation

Share Improve this question Follow asked Apr 21, 2020 at 19:11 Darryl HuffmanDarryl Huffman 2,58933 gold badges2222 silver badges4141 bronze badges 5

• Starting to think I'm just in a pickle lol! I may have to resort to uploading it to a server like Heroku but then I need to worry about figuring out my database too.... – Darryl Huffman Commented Apr 22, 2020 at 19:05
• You can easily run a local HTTPS server using http-server NPM package. You just generate your own certificate using openssl in the same directory with your site and it will work using http-server -S -C cert.pem -o -p 80 inside the directory with your local website, though I doubt this is the issue. Do you have any other resources that are being served over single HTTP in that page? You should create a simple page just containing the geolocation.getCurrentPosition code so to test it out. I can provide the steps to create it if you want. – Christos Lytras Commented Apr 25, 2020 at 20:16
• 1 Which local server are you currently using, Apache? You can even create your own certificate and enable that local server to serve the site with HTTPS using that cert. The site will get flagged as unsecure by Chrome because you'll have a self-signed certificate, but that does not affect the usage of the Geolocation API and you should be able to test it out. I didn't have any issues to test the Geolocation API on Chrome desktop/mobile served by a local server using HTTPS even with a self-signed certificate. – Christos Lytras Commented Apr 25, 2020 at 20:22
• 1 @ChristosLytras can you post this as an answer? Between your response and stackoverflow./questions/21397809/… I was able to get this working. – Darryl Huffman Commented Apr 30, 2020 at 19:41
• 1 Nice you got this working Darryl. I've provided an answer. Check it out and even make any changes if you want. – Christos Lytras Commented Apr 30, 2020 at 20:22

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

if you are using chrome browser on your phone which is remended. Then you could head over to

chrome://flags

and search for these 2 options and Enable them.

Allow invalid certificates for resources loaded from localhost.

and

Insecure origins treated as secure

You can easily run a local HTTPS server using http-server NPM package. You just generate your own certificate using openssl in the same directory with your site using something like this:

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

and it will work starting the server by executing:

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

inside the directory with your local website. Take care of the filenames of the key and the certifacate because http-server default key filename is key.pem but of course you can change that using the -K <filename> parameter.

You can even use that certificate to other local servers (Apache, Express, Nginx, etc.) to serve the site with HTTPS using that cert. The site will get flagged as unsecure by Chrome because you'll have a self-signed certificate, but that does not affect the usage of the Geolocation API and you should be able to test it out. And as you have found, you can even trust that self-signed certificate and add it to browsers like Chrome ("create a trusted self-signed SSL cert for localhost").

Also check if you have any other resources that are being served over single HTTP in that page because there will be issues if there are. You should create a simple page just containing the geolocation.getCurrentPosition code so to test it out.

If you are using chrome on your mobile then you can set a flag for this.

In chrome navigate to:

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

then enter the address you are serving your site from and chrome will treat it as a secure site

You will need to deploy your website to a production server like heroku, aws or any other production server of your choice for you to be able to get what you want.

You can't run a local server on your smart phone because the site can only run locally on the host system where it lives.

I hope this helps!

本文标签： javascriptUsing geolocationgetCurrentPosition while testing on local networkStack Overflow