为什么我无法将Heroku上的React应用程序从http重定向到https?

sxissh06  于 2022-11-13  发布在  React
关注(0)|答案(5)|浏览(130)

我在Heroku上有一个应用程序,它是使用create-react-app创建的。就在今天,我使用Heroku的自动化(-ish)SSL证书进程ExpeditedSSL获得了一个SSL证书,然后文档建议将所有http请求重新路由到https。
我有一个server.js文件和express,我只是尝试运行中间件,然后为我的React应用程序提供服务。
我知道SSL证书是工作的,就像我去https://myapp.com我看到我的Heroku应用程序,但当我去http://myapp.com它不是重定向到https版本的Heroku应用程序。
今天我已经尝试了很多很多的solutions,从StackOverflow,Google,和其他地方,没有一个解决方案对我有效。我也没有得到任何错误。它就是不工作。
尝试使用https library

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-redirect的另一个尝试:

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);

我也尝试了一些随机节点安装从各种博客和SO的职位,并没有任何工作。没有任何错误,我有一个很难弄清楚为什么这不工作。

vawmfj5a

vawmfj5a1#

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

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

我曾经遇到过一个类似的问题,这个问题让我得以解决。将它放在头文件中可以确保脚本在任何捆绑的JavaScript之前运行,但我认为它应该在bundle.js文件之上运行

mnowg1ta

mnowg1ta2#

以下是更新和安全的解决方案:
由于您使用create-react-app通过Heroku部署react应用程序,并且它是buidlpack(建议,如果您不是:create-react-app-buildpack).所以正如官方文档所说:

Web服务器可以通过静态构建包进行配置。
配置文件static.json应在存储库的根目录下提交。如果此文件位于子目录中,则无法识别它
如果存储库中不存在默认的static.json,则它为:

{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  }
}

仅限HTTPS

static.json中,通过自动将不安全的请求重定向到**https://**来强制实施安全连接:

{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  },
  "https_only": true
}

@misterfoxy的方法有效,但不是正确的方法!

xqnpmsa8

xqnpmsa83#

请尝试使用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'));
});
zengzsys

zengzsys4#

尝试将其添加到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>
8iwquhpp

8iwquhpp5#

这个好像对我有用对Heroku做出React
构建包https://github.com/mars/create-react-app-buildpack
root/static.json

{
  "root": "build/",
  "routes": {
    "/**": "index.html"
  },
  "https_only": true
}

https://youtu.be/LAjj_kzqbjw

相关问题