通過 nodejs 和 express 重定向到自定義 url

Question

我有重定向問題。 我有一個小的nodejs/express應用程序，它應該在提交表單后使用表單的輸入值重定向到外部 URL。

索引.html

<form method="POST" action="https://192.0.2.1/abc.html">
    <input name="name"/>
    <input name="email"/>
    <button type="submit">
</form>

它只會轉到https://192.0.2.1/abc.html而沒有輸入的值。 請幫忙。

Answer 1

例子

我寫了一個你所描述的工作示例：

'use strict';
var host = '127.0.0.1', port = 3333;
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.urlencoded({extended: true}));
app.get('/', (req, res) => {
  res.type('html').end(`
    <form method="POST" action="http://${host}:${port}/abc.html">
    <input name="name"/>
    <input name="email"/>
    <button type="submit">Submit</button>
    </form>
    <form method="POST" action="http://${host}:${port}/def.html">
    <input name="name"/>
    <input name="email"/>
    <button type="submit">Submit</button>
    </form>
  `);
});
app.post('/abc.html', (req, res) => {
  var name = req.body.name, email = req.body.email;
  res.redirect(`http://${host}:${port}/ghi.html?name=${name}&email=${email}`);
});
app.post('/def.html', (req, res) => {
  res.type('html').end(`
    <p>Name: ${req.body.name}</p>
    <p>Email: ${req.body.email}</p>
  `);
});
app.get('/ghi.html', (req, res) => {
  res.type('html').end(`
    <p>Name: ${req.query.name}</p>
    <p>Email: ${req.query.email}</p>
  `);
});
app.listen(port, () =>
  console.log(`Listening on http://${host}:${port}/`));

跑步

您需要安裝express和body-parser ：

npm install express body-parser

並運行：

node app.js

兩種形式

第一種形式通過 POST 方法正確傳遞參數。 POST /abc.html處理程序可以訪問它們並將重定向發送到表單的自定義 URL： /ghi.html?name=xxx&email=yyy - 重定向的目標以 HTML 格式顯示這些值，您可以在地址欄也是如此。

第二種形式不重定向而是直接顯示參數，以便您更好地了解發生了什么。 在瀏覽器中打開開發者控制台並在單擊表單按鈕時觀察網絡活動也很有用。

解釋

從您的示例中並不完全清楚您的代碼中可能有什么問題，但我希望向您展示一個有效的示例代碼將有助於您診斷實現中的問題。

您必須記住的是，對於在查詢字符串中傳遞參數的 GET 請求，您可以通過以下方式訪問它們：

req.query.name
req.query.email

對於在請求正文中傳遞參數的 POST 請求，您必須使用body-parser中間件，然后您可以通過以下方式訪問它們：

req.body.name
req.body.email

請求概述

這里發生的請求是：

1. 您訪問http://127.0.0.1:3333/並獲得兩種形式的 HTML
2. 您輸入電子郵件aaa作為名稱，輸入bbb作為電子郵件並提交第一個表格
3. 您的瀏覽器向/abc.html發送一個 POST 請求， /abc.html包含name=aaa&email=bbb
4. 服務器發送帶有Location: http://127.0.0.1:3333/ghi.html?name=aaa&email=bbb的302 Found響應Location: http://127.0.0.1:3333/ghi.html?name=aaa&email=bbb標頭
5. 您的瀏覽器將 GET 請求發送至： /ghi.html?name=aaa&email=bbb
6. 服務器發送一個帶有 HTML 的200 OK響應，包括參數