使用字符串拼接在res.redirect传值时出现多余%20的问题

代码片段 #

const express = require("express");
const bodyParser = require("body-parser");
const mongoose = require("mongoose");
const date = require(__dirname + "/date.js");

const app = express();

app.use(express.static("public"));

app.use(bodyParser.urlencoded({extended:true}));

app.post("/del",function(req,res){
    const checkBoxId = req.body.checkBox;
    const listName = req.body.listName;
    res.redirect("/"+listName);
})

问题描述 #

当通过/del路由执行重定向操作时，假设预期listName的值为"about"，预期重定向到localhost:3000/about，但实际却重定向到localhost:3000/about%20。

原因 #

%20是空格字符的URL编码形式，这说明你获取到的listName值并不是纯"about"，而是"about "（末尾带有一个空格）。

出现这种情况的常见场景：

• 前端表单里对应listName的输入框/隐藏域的value属性不小心加了多余空格，比如<input type="hidden" name="listName" value="about ">
• 用户在输入listName相关内容时，不小心在末尾输入了空格
• 后端生成listName值的逻辑中，额外引入了空格

解决办法 #

在获取listName后，立即用trim()方法去除字符串首尾的空格，修改代码如下：

app.post("/del",function(req,res){
    const checkBoxId = req.body.checkBox;
    // 用trim()去除首尾空格
    const listName = req.body.listName.trim();
    res.redirect("/"+listName);
})

这样即使req.body.listName带前后空格，也会被清理掉，重定向的URL就会变成预期的localhost:3000/about。

内容的提问来源于stack exchange，提问作者Abhimayu Singh