Unable to call to API after deploying app to Heroku

Question

I've made a weather app that makes an API call to freegeoip to locate your current location's coordinates, and then using those coordinates to connect to openweathermap API to fetch your current location's weather.

In development the app worked perfectly fine. But after deploying to Heroku, I seem to get what looks like a CORS error?

Console logs:

Mixed Content: The page at 'https://weather-react-drhectapus.herokuapp.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://freegeoip.net/json/'. This request has been blocked; the content must be served over HTTPS.

Link to Heroku app

EDIT:

Changing to https seems to work for the freegeoip API (https://freegeoip.net/json/), but doesn't work for the openweathermap API. This is the full console log I get:

GET https://api.openweathermap.org/data/2.5/weather?appid=95108d63b7f0cf597d80c6d17c8010e0&lat=49.25&lon=4.0333 net::ERR_CONNECTION_CLOSED

bundle.js:16 Uncaught (in promise) Error: Network Error
    at e.exports (bundle.js:16)
    at XMLHttpRequest.d.onerror (bundle.js:16)

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error

score 2 · Accepted Answer · edited May 23 '17 at 12:34

2

Just change API endpoint to use https instead of http.

https://freegeoip.net/json/ works well ;)

Update
Your updated question contains one more request. Unfortunately, api.openweathermap.org is not available over HTTPS. Thus, you need to reach it thru proxy under your control and forward response to your client. For more info, see this answer

edited May 23 '17 at 12:34

Community

1
1

answered Apr 29 '17 at 13:22

Andreyco

22,476
5
61
65

works for the freegeoip API, but not for the openweathermap one :( – doctopus Apr 29 '17 at 13:33

score 0 · Answer 2 · answered Jul 18 '17 at 15:54

If you apply this middleware it should start working correctly

  app.use(function (req, res, next) {
    if (req.headers['x-forwarded-proto'] === 'https') {
      res.redirect('http://' + req.hostname + req.url);
    } else {
      next();
    }
  });

Unable to call to API after deploying app to Heroku

2 Answers2