前端基础知识之---Content-Type有哪些格式

Content-Type 是 HTTP 头，告诉服务器请求或响应的数据格式

一、常见 Content-Type 一览

Content-Type	说明	请求体格式示例
`application/json`	JSON 格式（最常用）	`{"name":"张三","age":25}`
`application/x-www-form-urlencoded`	表单格式（URL 编码）	`name=张三&age=25`
`multipart/form-data`	文件上传格式	包含 boundary 分隔符的混合数据
`text/plain`	纯文本	`hello world`
`text/html`	HTML 格式	`<div>hello</div>`
`application/xml`	XML 格式	`<user><name>张三</name></user>`
`application/javascript`	JS 文件	`console.log('hello')`
`image/png` / `image/jpeg`	图片格式	二进制数据

二、详细说明

1、 application/json（前后端分离最常用）

在封装axios时默认设置成application/json

javascript 复制代码

const request = (option: any) => {
  const { headersType, headers, ...otherOption } = option
  return service({
    ...otherOption,
    headers: {
      'Content-Type': headersType || default_headers,
      language: locale.lang || 'zh-CN',
      ...headers
    }
  })
}
default_headers: 'application/json'

//举例
fetch('/api/user', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: '张三', age: 25 })
})

2、application/x-www-form-urlencoded（传统表单）

javascript 复制代码

return request.post({
    url: '/system/oauth2/authorize',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    params: {
      response_type: responseType,
      client_id: clientId,
      redirect_uri: redirectUri,
      state: state,
      auto_approve: autoApprove,
      scope: JSON.stringify(scopes)
    }
  })

//举例
// 方式1：手动拼接
fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: 'username=admin&password=123456'
})

// 方式2：使用 URLSearchParams
const params = new URLSearchParams()
params.append('username', 'admin')
params.append('password', '123456')

fetch('/api/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: params  // axios 会自动设置 Content-Type
})

3、multipart/form-data（文件上传）

javascript 复制代码

upload: async <T = any>(option: any) => {
    option.headersType = 'multipart/form-data'
    const res = await request({ method: 'POST', ...option })
    return res as unknown as Promise<T>
}

//举例
const formData = new FormData()
formData.append('file', fileInput.files[0])
formData.append('name', '头像')

fetch('/api/upload', {
  method: 'POST',
  body: formData  // ⚠️ 不要手动设置 Content-Type，浏览器会自动加 boundary
})

4、text/plain（纯文本）

javascript 复制代码

fetch('/api/log', {
  method: 'POST',
  headers: { 'Content-Type': 'text/plain' },
  body: '这是一条日志信息'
})

三、面试常问：JSON 和 Form 格式的区别

对比项	JSON	URL-encoded
数据格式	`{"name":"张三"}`	`name=张三`
支持嵌套对象	✅ 支持	❌ 不支持
支持数组	✅ 支持	⚠️ 需要特殊处理 `name[]=1&name[]=2`
可读性	高	中
传输效率	略大	略小