HTTPSリダイレクトは、ページがリロードされたときにのみ動作します

Question

Node.js + Expressアプリケーションを実行するページにSSL証明書をインストールし、常にHTTPSへのリダイレクトを強制するようにExpressサーバーを設定しました。リダイレクトは、ページがリロードされたとき、またはEnterキーが再び押されたときにのみ機能します。私は何が起こるかを示すために、GIFを記録：

http://recordit.co/uBiW3bcQCM

そして、ここでは私のエクスプレスの構成です。

var express = require('express'); 
var path = require('path'); 
var serveStatic = require('serve-static'); 

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

app = express(); 
app.use(serveStatic(__dirname)); 

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

app.all('/*', function(req, res) { 
    res.sendfile('index.html'); 
}); 

var port = process.env.PORT || 5000; 
app.listen(port); 

console.log('server started '+ port); 

私のアプリケーションはHerokuで動作します。何が起こっているのかを誰かが助けてくれますか？

ありがとうございます。

Answer 1

あなたのサーバーはリダイレクトヘッダーを送信する前にコンテンツを送信していると思います。

あなたが交換した場合：

app.use(serveStatic(__dirname)); 
app.use(forceSsl); 

のために：

app.use(forceSsl); 
app.use(serveStatic(__dirname)); 

はるかに優れて動作しているようです！

あなたのブラウザがreload/enterでリダイレクトを実行した理由は、私がその動作を再現できないため、私にはあいまいです。 FFで私は決してリダイレクトされませんでした。

リクエストヘッダーが異なっている可能性があります。たとえば、GETではなくHEADなどです。私はそれについてもっと調べることができませんでした.WiresharkやBurpsuiteを使って、何が起こっているのかを正確に知ることができました...

Answer 2

redirectToHTTPS（）ミドルウェアが有効です。ユーザーがプレフィックスを入力しなくても、httpsサイトにリダイレクトされます。 httpsサイトに使用するポートを識別するためにX-Forwarded-Portを追加します。

function redirectToHTTPS() { 
    return function middlewareRedirectToHTTPS (req, res, next) { 
    const isNotSecure = (!req.get('x-forwarded-port') && req.protocol !== 'https') || 
     parseInt(req.get('x-forwarded-port'), 10) !== 443 
    if (isNotSecure) { 
     return res.redirect('https://' + req.get('host') + req.url) 
    } 
    next() 
} 
}