前端与后端通信的五种 HTTP 数据传输方式详解

在现代 Web 开发中，前后端分离架构已成为主流。前端通过 HTTP 请求与后端交互，而后端则通过提供 API 接口返回所需数据。那么，这些数据究竟是如何从前端传到后端的呢？

实际上，HTTP 协议支持多种数据传输方式。本文将详细介绍 5 种常见的 HTTP 数据传输方式：url param、query、form-urlencoded、form-data 和 json，并结合 Nest.js 框架和 Axios 库进行实战演示。

一、URL Param（路径参数）

URL Param 是指将参数直接嵌入 URL 路径中，例如：

http://example.com/api/person/1111

这里的 1111 就是一个路径参数。它通常用于标识某个具体资源（如用户 ID）。

Nest.js 后端实现

@Controller('api/person')
export class PersonController {
  @Get(':id')
  urlParam(@Param('id') id: string) {
    return `received: id=${id}`;
  }
}

使用 @Param('id') 装饰器即可从 URL 中提取参数。

前端 Axios 调用

async function urlParam() {
  const res = await axios.get('/api/person/Sullivan');
  console.log(res.data); // received: id=Sullivan
}

注意：虽然示例中用了名字作为 ID，但实际项目中建议使用唯一 ID。

二、Query（查询参数）

Query 是指通过 URL 中 ? 后面的键值对传递数据，例如：

http://example.com/api/person?name=Sullivan&age=21

非英文字符或特殊符号需进行 URL 编码（如 encodeURIComponent 或 query-string 库）。

Nest.js 后端实现

@Get('find')
query(@Query('name') name: string, @Query('age') age: number) {
  return `received: name=${name}, age=${age}`;
}

使用 @Query() 装饰器获取查询参数。

⚠️ 注意：此路由应放在 :id 路由之前，避免被路径参数拦截。

前端 Axios 调用

async function query() {
  const res = await axios.get('/api/person/find', {
    params: {
      name: 'Sullivan',
      age: 21
    }
  });
  console.log(res.data); // received: name=Sullivan, age=21
}

Axios 会自动对 params 进行 URL 编码，无需手动处理。

三、Form-Urlencoded（表单编码）

Form-Urlencoded 是传统 HTML 表单提交的方式，数据放在请求体（body）中，格式与 Query 类似，但需设置 Content-Type: application/x-www-form-urlencoded。

Nest.js 后端实现

首先定义 DTO（数据传输对象）：

// dto/create-person.dto.ts
export class CreatePersonDto {
  name: string;
  age: number;
}

控制器中使用 @Body() 接收：

@Post()
body(@Body() createPersonDto: CreatePersonDto) {
  return `received: ${JSON.stringify(createPersonDto)}`;
}

Nest 会根据 Content-Type 自动解析 body。

前端 Axios 调用（需引入 Qs 库）

<script src="https://unpkg.com/qs@6.10.2/dist/qs.js"></script>

async function formUrlEncoded() {
  const res = await axios.post('/api/person', Qs.stringify({
    name: 'Sullivan',
    age: 21
  }), {
    headers: { 'content-type': 'application/x-www-form-urlencoded' }
  });
  console.log(res.data); // received: {"name":"Sullivan","age":21}
}

使用 Qs.stringify() 对数据进行 URL 编码。

四、JSON（最常用）

JSON 是目前前后端通信的主流方式，只需设置 Content-Type: application/json，数据以 JSON 格式直接放入 body。

Nest.js 后端实现

与 Form-Urlencoded 完全相同！Nest 会根据 Content-Type 自动选择解析器。

@Post()
body(@Body() createPersonDto: CreatePersonDto) {
  return `received: ${JSON.stringify(createPersonDto)}`;
}

前端 Axios 调用（默认即为 JSON）

async function json() {
  const res = await axios.post('/api/person', {
    name: 'Sullivan',
    age: 21
  });
  console.log(res.data); // received: {"name":"Sullivan","age":21}
}

✅ 无需手动设置 headers，Axios 默认发送 JSON 并设置正确 Content-Type。

五、Form-Data（文件上传专用）

Form-Data 使用 multipart/form-data 格式，通过 boundary 分隔不同字段，特别适合上传文件。

Nest.js 后端实现

需使用 FilesInterceptor 拦截器：

import { AnyFilesInterceptor } from '@nestjs/platform-express';
import { UploadedFiles, UseInterceptors } from '@nestjs/common';

@Post('file')
@UseInterceptors(AnyFilesInterceptor({ dest: 'uploads/' }))
body2(
  @Body() createPersonDto: CreatePersonDto,
  @UploadedFiles() files: Array<Express.Multer.File>
) {
  console.log('Files:', files);
  return `received: ${JSON.stringify(createPersonDto)}`;
}

需安装类型声明：npm i -D @types/multer

前端 Axios 调用

<input id="fileInput" type="file" multiple />

const fileInput = document.querySelector('#fileInput');

async function formData() {
  const data = new FormData();
  data.set('name', 'Sullivan');
  data.set('age', 21);
  data.set('file1', fileInput.files[0]);
  data.set('file2', fileInput.files[1]);

  const res = await axios.post('/api/person/file', data, {
    headers: { 'content-type': 'multipart/form-data' }
  });
  console.log(res.data);
}

fileInput.onchange = formData;

✅ Axios 会自动设置正确的 Content-Type（含 boundary），无需手动指定。

总结对比

结语

掌握这 5 种 HTTP 数据传输方式，是构建健壮前后端通信的基础。在实际开发中：

• 优先使用 JSON 传输结构化数据；
• 上传文件时必须用 Form-Data；
• 简单参数可用 Query 或 URL Param；
• Form-Urlencoded 多用于兼容旧系统或表单提交。