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

【问题标题】：Unable to call to API after deploying app to Heroku将应用程序部署到 Heroku 后无法调用 API
【发布时间】：2017-09-27 12:20:34
【问题描述】：

我制作了一个天气应用程序，它通过 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.

链接到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

【问题讨论】：

标签： reactjs api heroku redux mixed-content

【解决方案1】：

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

https://freegeoip.net/json/ 效果很好；）

更新
您更新的问题包含另一个请求。不幸的是，api.openweathermap.org 不能通过 HTTPS 使用。因此，您需要在您的控制下通过代理访问它并将响应转发给您的客户。欲了解更多信息，请参阅this answer

【讨论】：

适用于 freegeoip API，但不适用于 openweathermap :(

【解决方案2】：

如果你应用这个中间件，它应该会开始正常工作

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

【讨论】：