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

理解问题根源：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设计原则的做法。

火山方舟

火山引擎一站式大模型服务平台，已接入满血版DeepSeek

99

查看详情

服务器端代码修改：

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服务器发送空请求体的问题，并构建健壮的数据交互系统。

以上就是Axios向Node.js服务器发送空请求体：原理与两种解决方案的详细内容，更多请关注php中文网其它相关文章！