使用Axios向Node.js服务器传参返回空对象的问题求助

你的服务端仅配置了express.urlencoded中间件，它负责解析**表单格式（application/x-www-form-urlencoded）的请求体；但Axios默认会将JavaScript对象序列化为JSON格式（application/json）**发送，服务端没有对应解析JSON的中间件，因此req.body返回空对象。而直接通过表单提交时，浏览器默认发送表单格式数据，所以能正常解析。

方法一：服务端添加JSON解析中间件 #

在现有express.urlencoded配置后，新增express.json()中间件，让服务端同时支持解析表单格式和JSON格式的请求体：

const app = express();
const path = require("path");

app.use(express.static('./public',{index:'form.html'}));

// 同时支持解析表单格式与JSON格式请求体
app.use(express.urlencoded({extended:true}));
app.use(express.json()); // 新增该行代码

app.post('/login',(req,res)=>{
  console.log('logged data: ',req.body);
  res.send('Thanks');
})

app.listen(8080, () => {
  console.log('server is running...in port 8080')
});

方法二：客户端发送表单格式数据 #

若不想修改服务端，可让Axios发送表单格式数据，以下两种方式任选其一：

方式A：直接传递FormData对象 #

无需将FormData转为普通对象，直接传给Axios即可，Axios会自动设置正确的请求头：

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const formData = new FormData(form);

  axios
    .post("http://localhost:8080/login", formData)
    .then(function (response) {
      console.log(response.data);
    })
    .catch(function (error) {
      console.log(error);
    });
});

方式B：手动设置请求头并序列化对象 #

若要传递普通对象，需手动设置Content-Type为表单格式，并用URLSearchParams序列化对象：

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const formData = new FormData(form);
  const formObject = {};
  formData.forEach((value, key) => {
    formObject[key] = value;
  });

  axios
    .post("http://localhost:8080/login", new URLSearchParams(formObject), {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    })
    .then(function (response) {
      console.log(response.data);
    })
    .catch(function (error) {
      console.log(error);
    });
});

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