Home
Support Forums

Fetch function works locally but not on deployment - React Tailwind app

Hello,

I’m having troubles with a react tailwind project that works well on local but not when deployed.
Normally, you add a city name, the app fetch data with the open weather map api to display weather information. There can be only one among 3 components : loading, error and forecast.
Loading during the fetch while waiting for a response
Error if API response is an error (like no API key, wrong URL…)
Forecast with the weather information from the API

Except that when you try to put the name of a city or anything else, there will always be the “loading” component that will be displayed endlessly. While trying to debug my program I realize that the app blocks at the first await fetch to the open weather map api ( in the src/hooks/useForecast.js).

      const API_call = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${API_key}&units=metric`);
      console.log(API_call);

Why do I think that ? Because there is never a console log with the API call not even for an error. If anayone has an idea to help me, I would be very grateful.

I already check it’s not an API key problem. For a same endpoint the fetch will work on local but not on deployment…

github of my project : https://github.com/Romainl01/weather_app
netlify of my project : https://distracted-easley-25a066.netlify.app/

Let me know if you need more information :slight_smile:

Thank you in advance for your time !

Ps : Sorry if my english is not perfect

Welcome to the forums @Romainl01

This is what I see in the console when trying to search for a city:

This is because you are calling a non-secure (ie. http) resource from a secure (ie. https) site. Easiest fix for that is to change the fetch URL from http:// to https://. It will work locally because you are (likely) not using SSL.

Hello Coelmay !

Thanks a lot for your time !! You’re right your solution works

It’s strange because I’ve never encountered this error message but whatever now it’s working !!!

Have a wonderful day !