MERN栈axios请求Express接口时params/query/body全为空如何解决

后端接收到空对象{}是前后端请求写法、参数读取、路由配置三类错误共同导致的，按以下步骤修改即可正常获取参数。

问题点1：前端axios请求参数传参位置错误 #

你当前使用api.get()发起GET请求，但axios的GET请求语法为axios.get(url, config)，不存在第三个参数。你将URLSearchParams实例作为第二个参数、headers配置作为第三个参数传入，等于参数和请求头都没有被axios正确识别，请求根本没有携带你拼接的username、password字段。
注意：登录类敏感接口不推荐使用GET请求，密码会明文拼接在URL中，存在日志泄露风险，优先使用POST请求将参数放在请求体中传输

前端修正代码（推荐POST方案） #

let api = axios.create({
  baseURL: "http://localhost:5000/validateSignIn",
})

export default function TopBar(input){

    function postCredentials(un, pw){
        // POST请求语法：axios.post(url, 请求体数据, 配置项)
        // 直接传JSON对象即可，不需要手动转URLSearchParams，后端express.json()可直接解析
        return api.post('/', {
            username: un,
            password: pw
        }, {
            headers: {
               'Content-Type': 'application/json',
            } 
        })
        .then(response=>response.data)
      }

    async function validateSignIn(){
        let user = document.getElementById("username").value
        let pw = document.getElementById("password").value
        let success = await postCredentials(user, pw)
        console.log(success)
        if(success){
            input.setState({"name":user})
            return input.setSignedIn(true);
        }
        else{
            console.log("invalid login attempt")
        }
    }
    // 组件JSX部分不需要改动
    return(
        <div className="signInPage">
            <div>Enter UserName: </div>
            <input type="username" id="username" maxLength="32" autoComplete="off">                
            </input>
            <div>Enter Password: </div>
            <input type="password" id="password" maxLength="32" autoComplete="off">                
            </input>
            <br />
            <button onClick={() => validateSignIn()}>Click to sign in</button>
        </div>
    )
}

问题点2：后端无效中间件干扰请求 #

你在服务端写的全局app.all("/")中间件完全无效：req.header()是读取请求头的方法，不是设置响应头的方法，且cors中间件已经自动处理跨域逻辑，这段代码只会干扰正常请求流程，直接删除即可。

服务端入口修正代码 #

const app = express();
// 注意中间件顺序：cors放在解析类中间件前面
app.use(cors())
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

// 删除以下无效中间件
// app.all("/", function(req, res, next) {
//     req.header("Origin", "http://localhost:3000/");
//     return next();
// });

app.use('/login', loginRoutes)
app.use('/validateSignIn', SignInRoutes)

const PORT = process.env.PORT || 5000
app.listen(PORT, () => console.log(`Server running on port ${PORT}`))

问题点3：路由未绑定请求方法、参数读取位置错误 #

你当前的路由文件只定义了处理函数，没有将函数绑定到对应路径的请求方法上，且参数读取逻辑错误：POST请求的参数不会直接挂载在req对象上，而是存放在req.body中。

路由文件修正代码 #

import express from 'express'
const router = express.Router();

// 绑定POST方法到/路径，和前端请求路径对应
router.post('/', (req, res) => { 
    console.log("接收的body参数:", JSON.stringify(req.body))
    // 从req.body中解构读取参数，不要直接读req.username
    const { username, password } = req.body
    if(!username || !password){
        // 记得加return，避免后续逻辑继续执行
        return res.send(false)
    }
    // 此处补充实际的账号密码校验逻辑
    res.send(true)
})

export default router

补充说明 #

• 如果坚持使用GET请求，需要将参数拼接到URL后，或放在axios config的params字段中，后端从req.query读取对应参数即可，不推荐登录场景使用
• req.params仅用于读取路径参数（如/user/:id格式路径中的id字段），普通键值对传参不会出现在该对象中
• 写完后重启后端服务、刷新前端页面再测试，即可正常拿到传递的username、password字段

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