前端篇-Content-Type 详解

这篇具有很好参考价值的文章主要介绍了前端篇-Content-Type 详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Content-Type

Content-Type(MediaType),即是Internet Media Type,互联网媒体类型,也叫做MIME类型。在互联网中有成百上千中不同的数据类型,HTTP在传输数据对象时会为他们打上称为MIME的数据格式标签,用于区分数据类型。最初MIME是用于电子邮件系统的,后来HTTP也采用了这一方案。

在HTTP协议消息头中,使用Content-Type来表示请求和响应中的媒体类型信息。它用来告诉服务端如何处理请求的数据,以及告诉客户端(一般是浏览器)如何解析响应的数据,比如显示图片,解析并展示html等等。

Content-Type的格式:


Content-Type:type/subtype ;parameter

type:主类型,任意的字符串,如text,如果是*号代表所有;
subtype:子类型,任意的字符串,如html,如果是*号代表所有,用“/”与主类型隔开;
parameter:可选参数,如charset,boundary等。


例如:
Content-Type: text/html;
Content-Type: application/json;charset:utf-8;

常见Content-Type

常见的Content-Type有数百个,下面例举了一些

HTML文档标记:text/html;
普通ASCII文档标记:text/html;
JPEG图片标记:image/jpeg;
GIF图片标记:image/gif;
js文档标记:application/javascript;
xml文件标记:application/xml;
更多具体内容可参考《图解HTTP》- 附录D
上面的Content-Type,我们只认得就好,但是下面有4种是需要我们清楚他们的区别及牢记在心的。

重要的4中Content-Type

1. application/x-www-form-urlencoded

HTTP会将请求参数用key1=val1&key2=val2的方式进行组织,并放到请求实体里面,注意如果是中文或特殊字符如"/"、","、“:" 等会自动进行URL转码。不支持文件,一般用于表单提交。
下面是一个例子:

请求参数

content-type上传类型,前端

http 请求报文

content-type上传类型,前端

2. multipart/form-data

与application/x-www-form-urlencoded不同,这是一个多部分多媒体类型。首先生成了一个 boundary 用于分割不同的字段,在请求实体里每个参数以------boundary开始,然后是附加信息和参数名,然后是空行,最后是参数内容。多个参数将会有多个boundary块。如果参数是文件会有特别的文件域。最后以------boundary–为结束标识。multipart/form-data支持文件上传的格式,一般需要上传文件的表单则用该类型。
下面是一个例子:

请求参数

content-type上传类型,前端

http 请求报文

content-type上传类型,前端

3. application/json

JSON 是一种轻量级的数据格式,以“键-值”对的方式组织的数据。这个使用这个类型,需要参数本身就是json格式的数据,参数会被直接放到请求实体里,不进行任何处理。服务端/客户端会按json格式解析数据(约定好的情况下)。

请求参数

content-type上传类型,前端

http 请求报文

content-type上传类型,前端

4. application/xml 和 text/xml

与application/json类似,这里用的是xml格式的数据,text/xml的话,将忽略xml数据里的编码格式,参考。

Content-Type的使用

1. request 的Content-Type

一般我们在开发的过程中需要注意客户端发送请求(Request)时的Content-Type设置,特别是使用ajax的时候,如果设置得不准确,很有可能导致请求失败。比如在spring中,如果接口使用了@RequestBody,spring强大的自动解析功能,会将请求实体的内容自动转换为Bean,但前提是请求的Content-Type必须设置为application/json,否正就会返回415错误。
注:415 错误是 Unsupported media type,即不支持的媒体类型。
建议:

如果是一个restful接口(json格式),一般将Content-Type设置为application/json; charset=UTF-8;
如果是文件上传,一般Content-Type设置为multipart/form-data
如果普通表单提交,一般Content-Type设置为application/x-www-form-urlencoded

2. response的Content-Type

服务端响应(Response)的Content-Type最好也保持准确,虽然一般web开发中,前端解析响应的数据不会根据Content-Type,并且服务端一般能自动设置准确的Content-Type,但是如果乱设置某些情况下可能会有问题,比如导出文件,打开图片等。如果在spring项目里使用@ResponseBody,spring会将响应的Content-Type设置为application/json;charset=UTF-8;,可能会导致文件无法导出,需要注意下。

response的Content-Type设置建议:

一般情况下不需要显示设置;
如果是文件导出,Content-Type 设置为 multipart/form-data,并且添加一个Content-Disposition设置为attachment;fileName=文件.后缀。
注:Content-Disposition是Content-Type的扩展,告诉浏览器弹窗下载框,而不是直接在浏览器里展示文件。因为一般浏览器对于它能够处理的文件类型,如txt,pdf 等,它都是直接打开展示,而不是弹窗下载框。
下面的一个设置response的Content-Type的例子:

未准确设置response的Content-type的情况,客户端将json数据当成普通文本
content-type →text/html;charset=UTF-8

content-type上传类型,前端


准确设置response的Content-type的情况,客户端将json数据自动解析
content-type →application/json;charset=UTF-8

content-type上传类型,前端


                        
原文链接:https://blog.csdn.net/qq_14869093/article/details/86307084文章来源地址https://www.toymoban.com/news/detail-859482.html

到了这里,关于前端篇-Content-Type 详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Content-Type 值有哪些?

    1、application/x-www-form-urlencoded 最常见 POST 提交数据的方式。 浏览器的原生 form 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据。 Cntent-Type 被指定为 application/x-www-form-urlencoded。 其次,提交的数据按照【name=小草莓other=hahah】的方式进行编

    2024年02月06日
    浏览(55)
  • http中的Content-Type类型

    最近在做web端下载的时候需要给前端返回一个二进制的流,需要在请求头中设置一个 那么http中的Content-Type有具体有哪些呢?他们具体的使用场景又是怎样的呢? MediaType,即是Internet Media Type,互联网媒体类型;也叫做MIME类型,在Http协议消息头中,使用Content-Type来表示具体请

    2024年02月06日
    浏览(54)
  • 关于前端如何下载后端接口返回content-type为application/octet-stream的文件

    后端接口定义为直接返回一个文件,如果带认证信息可以直接通过浏览器url下载,但是接口需要传headers认证信息,url上又不支持传相关信息 前端正常请求接口,设置responseType值为blob,这样取到接口返回的数据为Blob类型,之后通过由blob数据创建一个指向类型数组的URL来完成

    2024年02月03日
    浏览(53)
  • content-type几种常见类型区别

    Content-Type叫做MIME(mediaType)类型,使用Content-Type来表示请求和响应中的媒体类型信息。如果是请求头,它用来告诉服务端如何处理请求的数据,如果是响应头,它用来告诉客户端(一般是浏览器)如何解析响应的数据。下面我们来介绍下常用的几种类型! 1.application/x-www-form

    2024年02月03日
    浏览(48)
  • Http请求中的Content-Type

    前阵子公司接回了一个旧的项目,刚开始的时候没有注意看前端设置的content-type,然后与后端同事进行接口联调的时候就,有时候发现数据就是对不上,后面看了一下代码中的axios请求相关设置,才发现是自己走坑了!主要是在请求拦截和响应拦截这块的处理,请求拦截这块

    2024年02月12日
    浏览(84)
  • Http Content-type 对照表

    文件扩展名 Content-Type(Mime-Type) 文件扩展名 Content-Type(Mime-Type) .*( 二进制流,不知道下载文件类型) application/octet-stream .tif image/tiff .001 application/x-001 .301 application/x-301 .323 text/h323 .906 application/x-906 .907 drawing/907 .a11 application/x-a11 .acp audio/x-mei-aac .ai application/postscript .aif audio/aiff

    2024年02月09日
    浏览(44)
  • HTTP的Content-type 和 responseType

    后端返回字节流,前端进行图片下载时遇到了问题,定位花了不少时间,本文再次记录梳理下  XMLHttpRequest本身支持responseType 允许我们手动的设置返回数据的类型 \\\'\\\' responseType 为空字符串时,采用默认类型 DOMString,与设置为 text 相同。 arraybuffer response 是一个包含二进制数据的

    2024年01月22日
    浏览(38)
  • 如何在 Postman 中设置 Content-Type?

    在使用  Postman  进行 API 测试时,有时需要设置请求的 Content-Type。本文将介绍如何在 Postman 中设置 Content-Type。想要学习更多关于 Postman 的知识,可访问 Postman 中文文档。 1、首先,打开 Postman 工具并创建一个新的请求接口。输入请求地址,例如  https://api.example.com/user 。 2、

    2024年02月08日
    浏览(57)
  • 关于openfeign调用时content-type的问题

    今天在A服务使用openfeign调用B服务的时候,发现经常会偶发性报错。错误如下: 情况为偶发,很让人头疼。 两个接口如下: A服务接口: delayReasonApi.test(student); 就是使用openfeign调用B服务的接口。 B服务接口: 因为A服务的接口是一个文件上传的接口,所以前端请求头中使用的

    2024年02月12日
    浏览(44)
  • HTTP content-type内容类型的常见格式

    本专栏是汇集了一些HTML常常被遗忘的知识,这里算是温故而知新,往往这些零碎的知识点,在你开发中能起到炸惊效果。我们每个人都没有过目不忘,过久不忘的本事,就让这一点点知识慢慢渗透你的脑海。 本专栏的风格是力求简洁明了。 Content-Type(内容类型),一般是指

    2024年02月04日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包