当前位置:首页 > 焦点

contenttype有哪些类型

打开任何一个网页,类型按下F12,类型切到Network面板,类型刷新一下——你会看到一长串请求,类型每个请求的类型Headers里都躺着一个Content-Type。它告诉浏览器:“我发给你的类型是什么东西。”就这么简单,类型但真要数清楚它有多少种类型,类型很多人会卡壳。类型

最常见的类型当然是text/html。你正在看的类型这个页面,服务器返回的类型就是它。没有这个头,类型浏览器会把HTML代码当纯文本直接显示出来,类型标签全变成可见字符。类型我刚开始学后端的时候,有次忘了设这个头,页面直接变成一堆乱码似的源码,排查了半天才反应过来。

比它再基础一点的是text/plain。纯文本,没有任何格式。日志文件、readme、某些API返回的简单字符串,都用它。不过现在JSON大行其道,text/plain在接口里反而少见了。

说到JSON,application/json大概是前后端分离之后最常打交道的类型。十年前大家还在用application/x-www-form-urlencoded传表单,键值对拼成a=1&b=2那种。现在除了原生表单提交和某些老系统,基本都换成了JSON。我见过一个项目,前端发请求忘了设Content-Type: application/json,后端框架直接解析失败,返回400,查了两小时——就少了一行header。

文件上传是另一个世界。表单里如果带文件,必须用multipart/form-data。它把每个字段和文件分成独立的part,用boundary隔开。这个类型不能手动拼,得靠浏览器或者HTTP库生成。早年间有人试图用application/x-www-form-urlencoded传文件,结果二进制数据被编码得面目全非,服务端收到一堆百分号。

图片、音频、视频各有各的类型。image/png、image/jpeg、image/gif、image/webp,audio/mpeg、video/mp4。浏览器看到image/*就直接渲染,看到video/*就挂个播放器。有个坑:image/svg+xml虽然带image前缀,但它本质是XML,可以内嵌脚本。所以很多站点上传SVG时会强制改成text/plain或者直接拒绝,防止XSS。

再往下走,application/octet-stream是万能备胎。任何二进制流,不知道具体类型时就用它。浏览器遇到这个类型不会尝试打开,而是直接弹出下载框。有些下载站故意把所有文件都设成这个,逼你保存到本地。

XML还没死透。application/xml和text/xml在一些企业级接口、SOAP服务、RSS订阅里依然活着。虽然JSON更轻更爽,但银行、政务、老ERP系统里,XML还是硬通货。我去年对接过一个海关接口,返回的就是application/xml,解析起来比JSON啰嗦三倍。

字体文件也有自己的类型:font/woff、font/woff2、font/ttf。CSS里@font-face加载字体时,如果服务器返回的Content-Type不对,Chrome可能直接忽略这个字体,控制台报个警告,页面字体就回退到系统默认。这个坑我踩过,排查时根本想不到是header的问题。

还有application/pdf、application/zip、application/gzip、application/javascript(现在规范推荐用text/javascript,但两者都能用)。application/wasm是WebAssembly的专属类型,浏览器看到它才会去编译执行。

类型后面还可以带参数。比如text/html; charset=utf-8,告诉浏览器用UTF-8解码。如果不带charset,中文页面极大概率乱码。multipart/form-data; boundary=----WebKitFormBoundaryxxx,boundary是分隔符。application/json; charset=utf-8虽然JSON规范说默认就是UTF-8,但写上也没坏处。

实际开发中,很多框架会根据文件扩展名自动推断Content-Type。但推断不一定准。比如.js文件,有的服务器返回application/javascript,有的返回text/javascript,还有的返回application/x-javascript。现代浏览器都能认,但严格的内容安全策略(CSP)可能会拦截不规范的写法。

最省事的做法:静态资源交给Nginx的mime.types文件,它内置了几百种映射。API接口手动设application/json。文件下载用application/octet-stream。别偷懒,别猜,打开文档查一下准确类型。一个错误的Content-Type能让前端调试一整个下午——我经历过,不想再来一次。

分享到: