# Content-Type 参考

URL: https://caijiao.org/reference/http/content-type
Source: docs/reference/http/content-type.md
Description: Content-Type Reference，整理请求体和响应体媒体类型、JSON、HTML、表单、文件上传、charset、nosniff 和常见错误。

`Content-Type` 用于说明请求体或响应体的媒体类型。接口调试、文件上传、静态资源返回异常时，通常都要先检查这个响应头。

## 语法

```http
Content-Type: <media-type>; charset=<encoding>
```

## 常见值

| Content-Type | 场景 |
| --- | --- |
| `text/html; charset=utf-8` | HTML 页面 |
| `application/json` | JSON 接口 |
| `text/css` | CSS 文件 |
| `application/javascript` | JavaScript 文件 |
| `image/svg+xml` | SVG 图片 |
| `application/x-www-form-urlencoded` | 普通表单 |
| `multipart/form-data` | 文件上传表单 |
| `text/plain` | 纯文本 |

## JSON POST 示例

```js
await fetch("/api/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ name: "Tom" }),
});
```

## 文件上传注意

使用 FormData 上传文件时，不要手动设置 `Content-Type`：

```js
const formData = new FormData(form);

await fetch("/api/upload", {
  method: "POST",
  body: formData,
});
```

浏览器会自动生成带 boundary 的 `multipart/form-data`。

## 常见错误

- JSON 请求缺少 `Content-Type: application/json`，服务端按文本或表单解析。
- 文件上传手写 `multipart/form-data`，缺少 boundary。
- 静态资源 MIME 类型错误，浏览器拒绝执行 CSS 或 JavaScript。
- 服务端返回 HTML 错误页，但前端按 JSON 解析，出现 `Unexpected token <`。

## 安全提示

为了减少浏览器 MIME sniffing 带来的误判，静态资源服务可以配合：

```http
X-Content-Type-Options: nosniff
```

## 相关内容

- [MIME Type 查询工具](/tool/mime-type-lookup)
- [HTTP Reference](/reference/http/)
- [HTTP Headers 总览](/reference/http/headers)
- [FormData 参考](/reference/web-api/formdata)
- [Fetch 如何发送 JSON POST 请求](/how-to/javascript/fetch-json-post)
- [Fetch 如何上传文件](/how-to/javascript/upload-file-fetch)
- [MDN Content-Type](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Type)