0

I need to fetch the user's location using axios from http://ip-api.com/json and based on it I've to conditionally render different content on the website. Its working fine on localhost(npm start) but when its deployed I get an axios network error. What can actually be the reason for this as I haven't encountered such an error.

const getGeoInfo = () => {
    axios
      .get("http://ip-api.com/json")
      .then((res) => {
        setRegion(res.data.regionName);
        if (res.data.country === "Canada" || res.data.country === "Pakistan") {
          setAcceptedCountries(true);
        } else setAcceptedCountries(false);
      })
      .catch((err) => {
        console.log(err);
      });
  };
Salman Abbas
  • 41
  • 6
  • Is this code running in the browser or via NodeJS? – Phil Aug 19 '22 at 00:18
  • Really doesn't make sense that anything would be different when deployed. This request is made from the client and if the address is the same, it shouldn't matter where the app is running from. Are you absolutely sure this is the exact code that you've built and deployed? – Phil Aug 19 '22 at 00:21
  • I just found out that this API is free only for non-commercial usage and not available via ssl. My bad – Salman Abbas Aug 19 '22 at 02:13
  • Ah, of course. You can't pull `http://` resources into a `https://` page – Phil Aug 19 '22 at 03:21
  • Does this answer your question? [HTTP Ajax Request via HTTPS Page](https://stackoverflow.com/questions/4032104/http-ajax-request-via-https-page) – Phil Aug 19 '22 at 03:22
  • Actually the ip-api isn't actually free for commercial usage, so that's the reason it isn't responding after deployment. That's what I figured out – Salman Abbas Aug 19 '22 at 23:21

0 Answers0