I want to pull data from the Weather api but getting some errors

Question

I am getting these errors:

1. GET http://127.0.0.1:5500/src/api.openweathermap.org/data/2.5/weather?lat=29.0188653&lon=77.7680952&appid=9268356eb17fbbe77a86201da74c9c46 404 (Not Found)
2. Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

JavaScript

window.addEventListener("load", () => {
  let lon;
  let lat;
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition((postion) => {
      lat = postion.coords.latitude;
      lon = postion.coords.longitude;
      const api = `api.openweathermap.org/data/2.5/weather? 
           lat=${lat}&lon=${lon}&appid=9268356eb17fbbe77a86201da74c9c46`;
      fetch(api)
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          console.log(data);a
        })
        .catch((err) => alert("Enable your location"));
    });
    // else{
    //     alert("Geolocation is not supported by this browser.";);
    // }
  }
});

Answer 1

Your local dev environment should be secure, i.e., you need to use https://localhost or https://127.0.0.1 to retrieve the lat and lnt data of your user, in this case, yourself's.

Use this to setup create a https certificate on your local machine, https://github.com/FiloSottile/mkcert

Besides, you need this link as a guide, https://www.section.io/engineering-education/how-to-get-ssl-https-for-localhost/

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition

navigator.geolocation.getCurrentPosition should be in a secure environment, even if it's localhost.