深入剖析 Vue、Axios 和 Egg.js 中 POST 请求参数的奥秘：揭开 Ctrl+C/V 大法的面纱

2024-02-14 12:31:40

在前端开发的日常工作中，我们常常使用 POST 请求向服务器发送数据。Vue.js 作为一款流行的前端框架，配合 Axios 这一 HTTP 客户端，能够方便地实现前后端数据交互。然而，当我们与 Egg.js 后端框架协同开发时，可能会遇到 POST 请求参数无法被后端正确接收的问题，这给开发过程带来了困扰。本文将深入探讨这个问题的根源，并提供几种行之有效的解决方案，帮助你摆脱这种困境。

问题分析：

问题通常出现在我们使用 Axios 发送 POST 请求，而 Egg.js 后端无法获取到请求参数的情况下。这可能是由于前端发送的数据格式与后端预期不符导致的。在 Vue 和 Axios 中，默认情况下会以 JSON 格式发送数据，而 Egg.js 默认情况下会解析表单格式的数据。如果我们没有正确设置请求头或数据格式，就会导致后端无法解析数据。

解决方案：

1. 正确设置 Content-Type 请求头：

为了确保后端能够正确解析请求数据，我们需要在 Axios 请求中设置 Content-Type 请求头为 application/json。这告诉服务器我们发送的数据是 JSON 格式的。

axios.post('/api/users', {
  name: 'John Doe',
  age: 30
}, {
  headers: {
    'Content-Type': 'application/json'
  }
});

2. 使用 qs 库进行数据序列化：

如果我们希望发送表单格式的数据，可以使用 qs 库将 JavaScript 对象序列化成 URL 编码的字符串。

import qs from 'qs';

axios.post('/api/users', qs.stringify({
  name: 'John Doe',
  age: 30
}), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
});

3. 在 Egg.js 中使用 bodyParser 中间件：

Egg.js 提供了 bodyParser 中间件，可以帮助我们解析不同格式的请求体数据，包括 JSON 和表单数据。我们需要在 Egg.js 应用中启用 bodyParser 中间件。

// config/config.default.js
exports.default = appInfo => {
  // ...
  config.middleware = [
    // ...
    'bodyParser',
  ];
  // ...
};

4. 使用 FormData 对象发送文件数据：

如果我们需要发送文件数据，可以使用 FormData 对象。FormData 对象可以模拟表单数据，并将文件数据添加到表单中。

const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('name', 'John Doe');

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});