Firebase hosting is blocking HTTP request made by hosted "Angular 8 application"

Question

• New to Firebase, New to Hosting

• Type of Application : Angular 8 Weather application for personal project

• Type of Data/API : Open source weather API for current and forecasted weather

• API Method:

    // Pass city name in query get its weather data
      getWeatherData(q: any): Observable<WeatherDataByCity> {
        this.apiRes = this._http.get(`https://api.openweathermap.org/data/2.5/weather?q=${q}&APPID=5d2a116653d0785ed8c6889aa535b3f2`)
        .pipe(
          retry(1),
          catchError(this.handleError)
        );
        return this.apiRes as Observable<WeatherDataByCity>;
      }

Hosting : Firebase, Followed all steps and Firebase deploy successful, I can view my dashboard page in browser

Issue :

1. Open source API for "Toronto" weather : http://api.openweathermap.org/data/2.5/weather?q=toronto&APPID=5d2a116653d0785ed8c6889aa535b3f2

If you notice, the API has HTTP head instead of HTTPS, and Firebase is blocking all this type of request from its hosting platform.

How can I resolve this issue? For weather, I am not able to find "HTTPS" for this API and even if I can. I have another app that makes the same type of request and in that case how can I ask Firebase to allow my HTTP API to fetch the data.

After pointed out my mistake, I updated the weather API with HTTPS instead of HTTP. And re-deploy the app of Firebase.

And got this error in console,

question from:https://stackoverflow.com/questions/65874035/firebase-hosting-is-blocking-http-request-made-by-hosted-angular-8-application

Answer 1

Waitting for answers