阻止在 Heroku 上加载 HTTP 混合内容答案

【问题标题】：Blocked Loading HTTP Mixed Content on Heroku阻止在 Heroku 上加载 HTTP 混合内容
【发布时间】：2015-10-11 16:14:17
【问题描述】：

我正在使用 Node.js 和 Express 创建一个 Web 应用程序。当我尝试将我的项目上传到 Heroku 时，我的所有内容都成功加载到页面上，但是当我尝试执行任何需要对我正在使用的 API 进行 AJAX 调用的操作时出现错误：

混合内容：页面位于 'https://farmers-market-finder.herokuapp.com/' 通过 HTTPS 加载，但请求了一个不安全的 XMLHttpRequest 端点 http://search.ams.usda.gov/farmersmarkets/v1/data.svc/zipSearch?zip=94118。此请求已被阻止；内容必须通过 HTTPS 提供。

我正在使用美国农业部制作的农贸市场数据 API，并遵循他们建议的 RESTful AJAX 请求格式：

 $.ajax({
    type: 'GET',
    url: 'http://search.ams.usda.gov/farmersmarkets/v1/data.svc/mktDetail?id=' + id, 
    async: false,
    success: function (data) { ... }
    })

我在 Stack Overflow 和其他网站上对这个混合内容错误进行了大量研究。大多数答案表明需要将“GET”请求路由更改为“https://...”才能在 Heroku 的 https 服务器上工作。我尝试切换它，但到 API 的路由不再有效；我收到 404 Not Found 错误。我还尝试将我的路由切换到一个相对链接（只写 url:'//search.ams...'）但得到了相同的 404 错误。似乎我确实需要一个 http:// 链接才能访问我尝试访问的 API。

有谁知道让 Heroku 允许我使用“http”链接而不是 https 或其他方式来成功发出请求的方法？

【问题讨论】：

标签： javascript ajax heroku

【解决方案1】：

在您的 server.js 文件中，将此代码添加到您的其他 app.use 语句上方。（应用 = expr

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

【讨论】：