JSON Fetch javasScript / jQuery NOT WORKING on live site

Question

I am wondering why when I fetch a JSON file it's not working. Here is the link and the way I use fetch() which was working on my localhost wamp64.
Link: http://zetcode.com/javascript/jsonurl/

All the ways of getting JSON data from that link is 100% working, thanks for that website and the people behind that post.

All are working as expected in my localhost here's screenshot
IMG: https://www.screencast.com/t/yafc6w900aM

By the way what I am trying to achieve is fetch data from Goeplugins in JSON format because I am using JavaScript...

In my localhost as you see in images attach link everything is working fined but on live site it's not working, I try to solve but I really need help for that one.. here's link,
Live Site: https://www.gpsup.andali.ph/fetch
Screenshot: https://www.screencast.com/t/BDcuqWxK

The file I was run in my localhost is absolutely the same the file I run to live site

Here's my codes:


<script> 
  
  var getRequest_uri = "http://www.geoplugin.net/extras/location.gp?lat=14.3164400&lon=120.9597400&format=json"; //getJSON_gps('location', latitude, longitude);

  fetch(getRequest_uri).then( res => res.json()).then((out) => {

    console.log('Output: ', out);


  }).catch(err => console.error(err)); 
   
</script>

I read post from this site says about HTTP / HTTPS issue adding this line code below in my meta but still not work

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" >

PLEASE DEVELPERS I NEED HELP, THANKS IN ADVANCE...

geoplugin.net api is supported by http protocol but why you put https at url? — development-ninja, Nov 13 '20 at 07:33
Both your screenshot links look down to me. Your live site crashes immediately with `script.js:7 Uncaught TypeError: Cannot read property 'style' of null` — Jeremy Thille, Nov 13 '20 at 07:34
It seems geoplugin.net doesn't support https. Running `curl http://www.geoplugin.net` works for me, while `curl https://www.geoplugin.net` results in a timeout. If you need to do a https connection on your live site, you might need to find an endpoint which supports https or set-up a kind of proxy. — cis, Nov 13 '20 at 07:34
@JeremyThille Pls.. right click to console to view the error result.. — Renniel Fernandez, Nov 13 '20 at 07:36
@RennielFernandez I totally understand why you put that https instead of http. Please note live server doesn't allow to access http protocol when ssl has been installed on server due to security reason. There is server configuration update needed. Tell me what web server you use on your hosted instance? — development-ninja, Nov 13 '20 at 07:39
@development-ninja nope I don't do that that's error result look : https://www.screencast.com/t/4NuGjdaG — Renniel Fernandez, Nov 13 '20 at 07:42
in your screenshot, the inspector says you are accessing to https:// not http. — development-ninja, Nov 13 '20 at 07:44
@JeremyThille Pls.. ignore that error that not related to the primary issue and not also affect or couz of current problem .. I asking Help all about fetching from JSON file using JSON format why NOT WORKING to live but working in my localhost.. — Renniel Fernandez, Nov 13 '20 at 07:44
I am recently working round in problems of not working on live sites though localhost is working.. Most of them was because live site was running on ssl certificated host so it prevent unsecured access from http. please reference this. https://stackoverflow.com/questions/59986936/why-is-geoplugin-api-doesnt-work-on-online-server — development-ninja, Nov 13 '20 at 07:46
Please give me related answer to my issue why not working on live site the JSON ```fetch()``` data but working on my localhost... or either explanation demo much better ways I said I used javaScript — Renniel Fernandez, Nov 13 '20 at 07:47
@RennielFernandez once your hosted webserver is running on ssl, you will need use ssl.geoplugin.net instead. https://www.geoplugin.com/webservices/ssl — development-ninja, Nov 13 '20 at 07:59
@development-ninja, I see hmm.. I think I need to purchase this but I am worried if nothing change because once sent them message but they don't reply.. ... anyway, thanks for this you sent very helpful Thank you very much! ... — Renniel Fernandez, Nov 13 '20 at 08:42
@RennielFernandez sure. I answered. please upvote if my answer is helpful)) thanks — development-ninja, Nov 13 '20 at 09:17

score 1 · Accepted Answer · answered Nov 13 '20 at 09:13

As in this guide, all the geoPlugin web services are available over secured sockets layer (SSL). https://www.geoplugin.com/webservices/ssl We know your hosted server is coverd by secured socket layer, which means it doesn't allow http request. You should purchase key to provide secure cover on your ssl server. https://www.geoplugin.com/premium#ssl_access_per_year After purchase you will get key, which you should use in all geoplugin webservices. let assume your key is Fqw9ch1k6Han28xP which is returned to your email.

var getRequest_uri = "https://ssl.geoplugin.net/extras/location.gp?k=Fqw9ch1k6Han28xP&lat=14.3164400&lon=120.9597400&format=json"; //getJSON_gps('location', latitude, longitude);

And it should work on your https hosted server. One tip: you should spend a little money to secure your web, not even much btw. :)

JSON Fetch javasScript / jQuery NOT WORKING on live site

1 Answers1