你提到的三种 Content-Type 对应不同的前端数据结构与构造方式，以下是详细说明和示例：

一、文件上传 → multipart/form-data

适用场景：上传图片、视频、附件等二进制文件

前端核心：使用 FormData对象自动处理边界和编码

数据结构示例（JavaScript）

// 假设有一个 <input type="file" id="fileInput">
const file = document.getElementById('fileInput').files[0];
const formData = new FormData();

关键点

• 无需手动设置​ Content-Type，浏览器会自动生成带 boundary的头部

• 支持混合数据类型（文件 + 普通字段）

• 后端通常用 multer（Node.js）、MultipartResolver（Spring）等解析

二、纯表单无文件 → application/x-www-form-urlencoded

适用场景：传统 HTML 表单提交、简单键值对数据

前端核心：键值对 URL 编码（key=value&key2=value2）

数据结构示例

方式 1：URLSearchParams（推荐）

const params = new URLSearchParams();
params.append('username', '张三');
params.append('age', '25');
params.append('hobby', '篮球'); 

方式 2：手动拼接字符串

const data = 'username=张三&age=25&hobby=' + encodeURIComponent('篮球');

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: data,
});

限制

• 不支持嵌套对象（如 { user: { name: '张三' } }）

• 特殊字符需编码（encodeURIComponent）

• 数据量有限制（URL 长度限制）

三、前后端分离 API → application/json

适用场景：RESTful API、复杂数据结构、SPA 应用

前端核心：JSON 序列化

数据结构示例

const product = {
  id: 'P001',
  name: '智能手机',
  specs: {
    color: '黑色',
    storage: '256GB',
  },
  tags: ['数码', '5G'],
};

fetch('/api/products', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123', 

优势

• 支持任意复杂嵌套结构

• 前后端数据格式统一（JavaScript 对象 ↔ JSON）

• 便于接口文档定义（OpenAPI/Swagger）

四、三种方式对比总结

五、实际开发建议

1. 文件上传：始终用 FormData，不要尝试用 JSON 传文件（Base64 除外，但效率低）

2. 表单提交：简单表单用 x-www-form-urlencoded，复杂表单可考虑 JSON

3. API 设计：优先使用 JSON，保持前后端一致

4. 注意跨域：application/json会触发 CORS 预检请求（OPTIONS）