将应用程序部署到 Heroku 后无法调用 API

Question

我制作了一个天气应用程序，可以 API 调用 freegeoip 来定位您当前位置的坐标，然后使用这些坐标连接到 openweathermap API 来获取您当前位置的天气.

在开发过程中，该应用程序运行良好。但是在部署到 Heroku 之后，我似乎得到了一个看起来像 CORS 错误的东西？

控制台日志：

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 到 Heroku app

编辑：

更改为 https 似乎适用于 freegeoip API (https://freegeoip.net/json/)，但不适用于 openweathermap API。这是我得到的完整控制台日志：

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

Answer 1

只需更改 API 端点以使用 https 而不是 http。

https://freegeoip.net/json/ 效果不错 ;)

更新
您更新的问题包含另一项请求。遗憾的是，api.openweathermap.org 无法通过 HTTPS 使用。因此，您需要在您的控制下通过代理访问它，并将响应转发给您的客户。有关详细信息，请参阅 this answer

Answer 2

如果您应用此中间件，它应该会开始正常工作

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

将应用程序部署到 Heroku 后无法调用 API

Unable to call to API after deploying app to Heroku

api

heroku

reactjs

mixed-content

redux