HTTP请求头的Content-Type字段

请求中的Content-Type

在请求中 (如POST 或 PUT)，Content-Type字段用于客户端告诉服务器实际发送的数据类型。当你发送一个HTTP的POST请求时，需要设置请求头中的Content-Type字段，告诉服务端你发送的数据是什么类型的。

设置请求头中的Content-Type

当客户端向服务端发起HTTP的POST请求时，需要告诉服务端，我们发送的数据类型，方便服务端去解析数据。如果你不设置，那么服务端可能无法处理你的请求。 为什么需要设置

表单中设置请求头的Content-Type

你有没有想过，除了使用浏览器提供的XMLHttpRequest对象发起HTTP请求外，纯粹的HTML是如何发起HTTP请求的,你一定会想到表单，对的，在HTML标签中，能够自定义发起GET或POST的HTTP请求的标签，只有form标签。当你设置成POST请求，点击提交按钮后，就会发起一个HTTP POST请求，这当然不奇怪，也很熟悉，但你也许很少想到，既然这是一个POST请求，那么我发送HTTP请求中的Content-Type是怎么设置的呢？

下面是一个普通的表单，点击提交后，查看控制台的NetWork,看表单发出的请求。

 <form action="./login" method="POST">
    <input type="text" name="user-name">
    <input type="tel" name="user-tel">
    <input type="submit">
 </form>

可以看到请求头中的信息如下：

POST / HTTP/1.1
Host: 127.0.0.1
Content-Type: application/x-www-form-urlencoded
Content-Length: 13

say=Hi&to=Mom

你会发现，即使你没有手动设置请求头中的Content-Type,请求中会默认有。这是为什么呢？因为form标签的enctype属性就是用于指定这个Content-Type的，其默认值就是：application/x-www-form-urlencoded。

那么表单中enctype除了这个值外，还有没有其他的呢，当然，因为仅仅一种数据类型怎么能够满足实际需求呢？form 的 enctype属性总共有三种值:

1. application/x-www-form-urlencoded
2. multipart/form-data
3. text/plain

分别说一下，这三种类型的使用：

• application/x-www-form-urlencoded：

用于普通字段的表单数据，表单数据会在请求体中，数据以符合某种格式(就是application/x-www-form-urlencoded这个格式啦，这真不是废话)发送给服务端，至于这个具体是什么样的格式，看MDN就可以知道了，总之，这个不是重点，因为就是一种格式而已。

• multipart/form-data

用于文件或二进制数据，数据会按照某种格式(就是multipart/form-data这种格式啦，这真不是废话)，你想知道这种格式具体是什么样的就看MDN，因为这并不是重点，就是一种格式而已。

• text/plain

永远不要使用这个值，因为不会被可靠的去解析。

小结: 以上就是如何设置form表单中POST请求的Content-Type，就是通过form的enctype属性设置。

AJAX 中设置POST请求头的Content-Type

AJAX 不只由XMLHtppRequest实现，不是，不是，不是，还有Fetch

XMLHttpRequest对象如何设置Content-Type

我们经常使用AJAX发送HTTP请求，那么在AJAX发的HTTP的请求中，是如何对请求头的Content-Type进行设置的呢？很简单，用XMLHttpRequest的API即可设置，即：XMLHttpRequest.setRequest.header()，这个方法用于设置请求头的，Content-Type可以这样设置：xhr.setRequest.header("Content-Type","application/x-www-form-urlencoded ")

例如发送JSON数据

var xhr = new XMLHttpRequest()
xhr.open('POST','./index.php')
xhr.setRequestHeader('Content-Type','application/json')
xhr.onreadystatechange = function() {
    xxx
}
xhr.send(JSON.stringfy(data))

小结: AJAX中通过XMLHttpRequest.setRequest.header()设置Content-Type字段。

Feth如何设置Content-Type

之前一直是由浏览器提供的XMLHttpRequest对象实现的AJAX,后来Ferch API也实现了同样的功能，那么这种情况是如何设置请求中的Content-Type呢？ 使用 Fethc提供的Headers API即可设置，具体设置如下：

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

小结: Fetch中通过Headers API 设置Content-Type字段。