Reactjs 为什么我不能将Heroku上的React应用程序从http重定向到https？

我在Heroku上有一个应用程序，它是使用

create react app

创建的。就在今天，我使用Heroku的自动化（-ish）SSL证书进程ExpeditDSSL获得了一个SSL证书，文档建议将所有http请求重新路由到https

我有一个server.js文件和express，用于尝试运行中间件，然后为我的React应用程序提供服务

我知道SSL证书就像我去看我的Heroku应用一样工作，但当我去看它时，它不会重定向到我的Heroku应用的https版本

今天，我尝试了许多来自StackOverflow、Google等公司的

解决方案，但并没有一个对我有效。我也没有任何错误。它就是不起作用

尝试使用https库

：

const https = require("https");
const express = require('express');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

https.createServer(app).listen(3000);

另一次尝试使用heroku ssl重定向：

var sslRedirect = require('heroku-ssl-redirect');
var express = require('express');
var app = express();

// enable ssl redirect
app.use(sslRedirect(['production'], 301));

app.use(express.static(path.join(__dirname, 'build')));

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

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(process.env.PORT || 3000);

尝试使用

x-forward-proto

：

const express = require('express');
const env = process.env.NODE_ENV || 'development';
const bodyParser = require('body-parser');
const path = require('path');
const app = express();

var forceSsl = function (req, res, next) {
  if (req.headers['x-forwarded-proto'] !== 'https') {
    return res.redirect(['https://', req.get('Host'), req.url].join(''));
  }
  return next();
};

if (env === 'production') {
  app.use(forceSsl);
}

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(process.env.PORT || 8080);

---

我还尝试过从各种博客和帖子中随机安装一些节点，但没有任何效果。在没有任何错误的情况下，我很难弄清楚为什么这不起作用。

尝试使用

express https redirect

安装时使用：

npm install express-https-redirect --save

然后，您应该能够执行以下操作：

const express = require('express');
const httpsRedirect = require('express-https-redirect');
const app = express();
app.use('/', httpsRedirect());
app.set('port', process.env.PORT || 3000);
app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(app.get('port'), function () {
        console.log('Express server listening on port ' + app.get('port'));
});

---

尝试将以下内容添加到index.html文件的标题中

<script>
var host = "www.URL.com" || "URL.com";
if ((host == window.location.host) && (window.location.protocol != "https:")){
window.location.protocol = "https";
}
</script>

var host=“www.URL.com”| |“URL.com”；
if（（host==window.location.host）&&（window.location.protocol！=“https:”）{
window.location.protocol=“https”；
}

---

我正在处理一个类似的问题，这使我能够解决它。将它放在头文件中可以确保脚本在任何绑定JavaScript之前运行，但我认为它会在bundle.js文件上方运行

尝试将其添加到index.html文件中 将其放在标题中，以便在其他脚本之前运行

<script>
const domain1 = "www.example.com";
const domain2 = "example.com";
const host = window.location.host;
if ((domain === host || domain2 === host) && (window.location.protocol !== "https:")){
  window.location.href = "https://www.example.com";
}
</script>

const domain1=“www.example.com”；
const domain2=“example.com”；
const host=window.location.host；
if（（domain==host | | domain2==host）&&&（window.location.protocol！==“https:”）{
window.location.href=”https://www.example.com";
}

下面更新的安全解决方案：

因为您是通过Heroku使用create react app部署您的react app，并且它是内置包（如果不是，建议使用：create react app buildpack）。因此，正如官方文件所说：

该web服务器可能是

配置文件

static.json

应该在repo的根目录下提交。如果此文件位于子目录中，则无法识别

如果回购协议中不存在默认的

static.json

，则默认为：

{
“root”：“build/”，
“路线”：{
“/**”：“index.html”
}
}

仅限HTTPS 通过自动将不安全的请求重定向到

static.json中的https://，强制实现安全连接：

{
“root”：“build/”，
“路线”：{
“/**”：“index.html”
},
“仅限https_”：true
}

@misterfoxy的方法有效，但不是正确的方法
 你试过这个吗？@pritesh是的。这是我尝试过的事情之一。不过，谢谢你的回复！我一到家就试试这个。谢谢。这似乎也失败了。如果我键入url sans
https
或使用
http
，它只会转到不安全的url。在url中使用
https
可以正常工作，但我无法让它从http重定向到https。奇怪的是，我需要使用
else if（）
单独声明每个
主机
字符串来实现这一点，这毫无意义，但情况确实如此。e、 g.
let longUrl='www.url.com'
let shortUrl='url.com'
<代码>如果（长URL====…）

else if（shortUrl===…）

@misterfoxy只是想说一声个人的“谢谢”，因为你的回答节省了我很多时间：）我只是好奇在应用层处理这个问题是否会有任何后果？索引不同？SEO？非常感谢，它工作得非常好！