[解決済み】ExpressJS : res.redirect()が期待通りに動かない?
質問
expressとMongooseを使ってログイン機能を実装したいのですが、コードは以下の通りです。
app
.get('/', (req, res) => {
console.log("Here we are : root");
return res.sendfile(__dirname + '/index.html');
})
.get('/login', (req, res) => {
console.log("Here we are : '/login'");
return res.sendfile(__dirname + '/login.html');
})
.post('/credentials', (req, res) => {
console.log("Here we are : '/credentials'");
// Some Mongoose / DB validations
return res.redirect('/');
});
ログインページがPOSTリクエストを
/credentials
投稿されたデータは検証されます。これは動作します。ここで、"Here we are .を見ることができます。'/credentials'" がNodeコンソールに表示されます。
次に問題なのは、res.redirectが正しく動作しないことです。私はそれが'/'ルートに到達することを知っています、なぜなら。
- Node コンソールで "Here we are : root" を見ることができます。
- index.htmlのページがレスポンスとしてブラウザに送り返されていますが、ウィンドウに表示されていません。Chrome のインスペクタには POST リクエストのレスポンスが表示され、インスペクタでブラウザに送信される HTML コードを確認できますが、URL は /login のままで、ログインページが画面上に表示されたままになっています。
(編集) リダイレクトはMongooseのコールバック関数にあり、(NodeJSがそうであるべきように)同期的ではありません。わかりやすくするために、Mongooseのバリデーションに関するものを削除したところです。
を追加してみました。
res.end()
しかし、それはうまくいきません。
試してみたところ
req.method = 'get';
res.redirect('/');
そして
res.writeHead(302, {location: '/'});
res.end();
しかし、それは動作しません
何が間違っているのでしょうか?どうすれば実際に '/login' ページを離れ、ブラウザを '/' にリダイレクトし、受け取った HTML コードを表示できるのでしょうか?
解決方法は?
問題は、バックエンドではなく、フロントエンドにあるのかもしれません。POSTリクエストを送信するためにAJAXを使用している場合、それは特にあなたのURLを変更しないように設計されています。
使用方法
window.location.href
は、AJAX のリクエストが完了した後 (
.done()
) を使って URL を希望のパスに更新するか、JQuery を使ってください。
$('body').replaceWith(data)
リクエストから戻ってきたHTMLを受け取るとき。
関連
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
Vue+ElementUIによる大規模なフォームの処理例
-
Vueのフィルタの説明
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み】gulp anythingを実行するたびに、アサーションエラーが発生します。- タスク関数を指定する必要があります
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
Uncaught TypeError: null のプロパティ 'offsetHeight' を読み取れませんでした。
-
JSクリックイベント - Uncaught TypeError: プロパティ 'onclick' に null を設定できません。
-
[解決済み] ExpressJS アプリケーションをどのように構成するか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptの関数この指摘の問題を説明
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
Vue+ElementUIによる大規模なフォームの処理例
-
HTML+CSS+JavaScriptで簡単な三目並べゲームを作成する。
-
vueのプロジェクトでモックを使用する方法を知っていますか?
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み】GETできない / Nodejsエラー
-
[解決済み】TypeErrorの解決方法。未定義またはヌルをオブジェクトに変換できない
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み】ExpressJS - throw er Unhandled errorイベント