Axios向Node.js服务器发送空请求体：原理与两种解决方案

在使用Axios向Node.js服务器发送数据时，req.body可能出现为空的情况，这通常是由于客户端发送的数据类型（默认为JSON）与服务器端期望的解析类型（如URL编码）不匹配所致。本文将深入探讨这一问题的原因，并提供两种有效的解决方案：通过客户端调整数据格式，或通过服务端配置JSON解析中间件，确保数据成功传输。

理解问题根源：Content-Type差异

当客户端使用axios发送post请求时，如果直接传递一个javascript对象作为请求体，axios默认会将其序列化为json格式，并设置请求头的content-type为application/json。

然而，在Node.js的Express框架中，express.urlencoded({ extended: true })中间件主要用于解析application/x-www-form-urlencoded格式的数据（这是传统HTML表单提交的默认格式）。如果服务器只配置了express.urlencoded而没有配置JSON解析器，当接收到application/json类型的请求时，req.body将无法被正确解析，从而显示为空对象。

这就是为什么当您直接使用HTML表单（action=”/login” method=”post”）提交时，数据能够被正确解析，因为HTML表单默认以application/x-www-form-urlencoded格式发送数据，与express.urlencoded中间件兼容。

解决方案一：客户端调整数据格式（URLSearchParams）

一种解决方案是在客户端将数据转换为application/x-www-form-urlencoded格式，使其与服务器现有的express.urlencoded中间件兼容。这可以通过JavaScript的URLSearchParams接口实现。

客户端代码修改：

// 假设formObject是您从表单收集到的数据对象
// const formObject = { txt: 'someValue' };
form.addEventListener("submit", (e) => {
e.preventDefault();
const formData = new FormData(form);
const formObject = {};
formData.forEach((value, key) => {
formObject[key] = value;
});
// 将JavaScript对象转换为URLSearchParams实例
// 这将把数据格式化为key1=value1&key2=value2的字符串
const params = new URLSearchParams(formObject);
axios
.post("http://localhost:8080/login", params) // 将URLSearchParams实例作为请求体
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
});

通过这种方式，Axios在发送请求时会自动设置Content-Type为application/x-www-form-urlencoded，服务器端的express.urlencoded中间件就能正确解析req.body。

解决方案二：服务端支持JSON解析（express.json()）

更推荐且更现代的解决方案是在服务器端添加一个JSON请求体解析器。由于Axios默认以JSON格式发送数据，让服务器支持解析JSON是最直接和符合RESTful API设计原则的做法。

Latent Labs

36

查看详情

服务器端代码修改：

const express = require('express');
const app = express();
const path = require('path');
// 启用静态文件服务
app.use(express.static('./public', { index: 'form.html' }));
// 添加JSON请求体解析中间件
app.use(express.json());
// 如果您也需要处理传统的URL编码表单数据，可以保留此行
app.use(express.urlencoded({ extended: true }));
app.post('/login', (req, res) => {
console.log('logged data: ', req.body); // 现在可以正确解析JSON或URL编码数据
res.send('Thanks');
});
app.listen(8080, () => {
console.log('server is running...in port 8080');
});

添加app.use(express.json());后，Express框架将能够自动解析Content-Type为application/json的请求体，并将其转换为JavaScript对象赋值给req.body。此时，您的客户端Axios代码无需任何修改即可正常工作：

客户端代码（无需修改）：

// ...
axios
.post("http://localhost:8080/login", formObject) // 保持原始的JavaScript对象
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
// ...

总结与注意事项

• 选择哪种方案？
  • 如果您主要构建现代Web应用或API，并且客户端通常以JSON格式发送数据，那么在服务器端添加app.use(express.json());是更简洁、更符合惯例的选择。
  • 如果您需要与只支持application/x-www-form-urlencoded格式的旧系统或特定API交互，或者希望保持与传统HTML表单提交行为一致，那么在客户端使用URLSearchParams转换数据会更合适。
• 中间件顺序： 在Express应用中，中间件的顺序很重要。解析请求体的中间件（如express.json()和express.urlencoded()）应该在处理具体路由之前被调用，这样req.body才能在路由处理器中被填充。
• Content-Type的重要性： 理解HTTP请求头中的Content-Type字段对于正确处理不同类型的数据至关重要。它告诉服务器请求体的数据格式，以便服务器选择正确的解析器。
• 安全性： 在处理用户提交的数据时，始终要注意输入验证和清理，以防止潜在的安全漏洞，如注入攻击。

通过理解客户端和服务器端数据格式的匹配原理，您可以有效地解决Axios向Node.js服务器发送空请求体的问题，并构建健壮的数据交互系统。