POST 请求通过 Content-Type 请求头区分数据提交格式，不同格式对应不同的数据编码方式和使用场景，是前后端交互的核心知识点
这是 HTTP POST 请求默认的数据提交格式，请求数据会被编码为 键值对 形式：
键与值之间用 = 连接
多组键值对之间用 & 分隔
特殊字符（中文、空格、符号）会进行 URL 编码
数据以纯文本形式传输，无复杂结构
简单表单提交（登录、注册、基础信息录入）
数据量小、仅包含文本类型的键值对数据
兼容所有后端框架，无需额外解析配置
import axios from "axios";
// 基础请求地址
const BASE_URL: string = "http://localhost:8080/";
/**
* 发送 application/x-www-form-urlencoded 格式 POST 请求
* @param url 接口路径
* @param data 键值对对象
*/
const postFormUrlEncoded = async (url: string, data: Record<string, any>) => {
try {
const response = await axios({
url: BASE_URL + url,
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
// 核心：将对象转换为 URL 编码格式
data: new URLSearchParams(data),
});
console.log("请求成功：", response.data);
} catch (err) {
console.error("请求失败：", (err as Error).message);
}
};
// 测试数据
const userInfo = {
username: "admin",
password: "123456",
};
// 调用请求
postFormUrlEncoded("test/post", userInfo);不支持传输文件、二进制数据
数据量过大时不推荐使用（无分块传输）
Axios 中必须使用 URLSearchParams 编码，否则后端无法解析
专门用于传输二进制数据的格式，数据会被分割为多个独立的部分（boundary 分隔），每个部分可单独定义数据类型，支持文本 + 文件混合传输，无需手动编码。
文件上传（图片、视频、文档、Excel 等）
表单中包含文件 + 普通文本的混合提交
大文件 / 二进制数据传输
import axios from "axios";
const BASE_URL: string = "http://localhost:8080/";
/**
* 发送 multipart/form-data 格式 POST 请求（文件上传）
* @param url 接口路径
* @param data 包含文件/文本的对象
*/
const postMultipartFormData = async (url: string, data: Record<string, any>) => {
try {
// 核心：创建 FormData 对象
const formData = new FormData();
// 遍历数据，追加到 FormData 中
Object.keys(data).forEach(key => {
formData.append(key, data[key]);
});
const response = await axios({
url: BASE_URL + url,
method: "POST",
headers: {
"Content-Type": "multipart/form-data",
},
data: formData,
});
console.log("上传成功：", response.data);
} catch (err) {
console.error("上传失败：", (err as Error).message);
}
};
// 测试数据：文件 + 普通文本
const uploadData = {
file: new File(["测试文件内容"], "test.txt", { type: "text/plain" }),
description: "测试文件上传",
uploadUser: "admin",
};
// 调用上传
postMultipartFormData("test/upload", uploadData);浏览器和 Axios 会自动生成 boundary 分隔符，无需手动配置
是文件上传的唯一标准格式，无法被其他格式替代
传输效率低于纯文本格式，仅在需要传文件时使用
目前前后端交互最主流的格式，数据以 JSON 字符串 形式传输，支持嵌套对象、数组、数字、布尔等复杂数据结构，可读性和扩展性极强。
前后端分离项目的接口交互
传输复杂结构化数据（嵌套对象、数组）
RESTful API 标准数据格式
绝大多数现代后端框架默认支持
import axios from "axios";
const BASE_URL: string = "http://localhost:8080/";
// 定义数据类型（类型约束，提升代码健壮性）
interface User {
username: string;
password: string;
age?: number;
hobbies?: string[];
}
/**
* 发送 application/json 格式 POST 请求
* @param url 接口路径
* @param data 结构化对象
*/
const postJson = async (url: string, data: User) => {
try {
const response = await axios({
url: BASE_URL + url,
method: "POST",
headers: {
"Content-Type": "application/json",
},
// Axios 自动将对象序列化为 JSON 字符串
data: data,
});
console.log("请求成功：", response.data);
} catch (err) {
console.error("请求失败：", (err as Error).message);
}
};
// 测试数据：包含嵌套结构
const user: User = {
username: "admin",
password: "123456",
age: 24,
hobbies: ["coding", "reading"],
};
// 调用请求
postJson("test/post", user);Axios 会自动序列化对象为 JSON，无需手动调用 JSON.stringify
后端需要配置 JSON 解析器（主流框架默认开启）
不支持直接传输文件，需搭配 multipart/form-data 使用
Content-Type 作用：告诉后端请求体的数据格式，后端根据该请求头选择对应的解析方式，格式不匹配会导致数据解析失败。
Axios 默认行为：Axios 传递普通对象时，默认使用 application/json 格式，无需手动配置请求头。
编码区别：前两种格式会对数据进行编码 / 分块处理，JSON 格式直接传输原始字符串，无额外编码。
数据大小：application/x-www-form-urlencoded 不适合大数据量；multipart/form-data 和 application/json 支持较大数据。
传简单文本用 application/x-www-form-urlencoded
传文件必须用 multipart/form-data
传复杂结构化数据优先用 application/json
开发中根据后端接口要求选择对应格式，Content-Type 必须与数据格式严格匹配