Javascript fetch API using HTTPS when clearly using HTTP on a WeatherStack endpoint

Here is the code im using in a top level Weather Component. I'm fetching on the client side using create-react-app on localhost:3000.

const fetchWeatherData = async () => {
        try {
                                                      (NOT A REAL API KEY)
            const response = await fetch('http://api.weatherstack.com/current?access_key=19a9566d7a5dbaeb4a467035cb59&query=Bozeman');
            const data = await response.json();
            console.log(data);

          } catch (error) {
            console.error('Error fetching weather data:', error);
            throw error;
          }

     };

The error im getting in my response promise object is the following ->

{success: false, error: {…}}

1. 1. error:

      1. code: 105

      2. info: "Access Restricted - Your current Subscription Plan does not support HTTPS Encryption."

      3. type: "https_access_restricted"

I've been doing research for hours trying to figure out why this seemingly obvious HTTP request is being understood as a HTTPS request from the browser. This code has worked, returning proper weather data from Bozeman before (about 10% of the time). Is this problem with the fetch api just using the browser/local development? Weatherstack just trying to get more paid users??

Im currently trying to setup up a backend using node and express to proxy the request, but no idea if that's the correct approach.

• Deep dived javascript fetch api to see if the HTTP requests were being changed to HTTPS
• (Trying currently) Proxying client side requests to server using Node + Express