请求头Content-Type

Posted 2023-04-25

参考技术A

这是我第9篇。

你们在使用Postman时，搞清楚下面这几个是干啥的吗

接下来介绍4个常用的类型。

上图的 form-data 就是指的 multipart/form-data
这是一个多部分多媒体类型，它是一个常见的 POST 数据提交的方式，它会生成了一个 boundary 用于分割不同的字段。它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。 既可以上传键值对，也可以上传文件。 当上传的字段是文件时，会有Content-Type来说明文件类型。
注意，当使用表单上传文件时，必须让 form 的 enctype 等于这个值。

上图的 x-www-form-urlencoded 就是指的 application/x-www-form-urlencoded
一般用于 表单提交 ，会将请求参数用 key1=val1&key2=val2 的方式进行组织和编码，key 和 val 都进行了 URL 转码，并放到请求实体里面（注意如果是中文或特殊字符如"/"、","、“:" 等会自动进行URL转码）。

最常用的。使用这个类型，提交的是序列化后的 JSON 字符串，服务端/客户端会按json格式解析数据

即传递XML格式，在以前比较常用，不接触老的项目应该用不到。

上图 binary 指的是 application/octet-stream 。
Content-Type为 application/octet-stream 时，只可上传二进制数据，通常用来上传文件，没有键值，一次只能上传一个文件。

使用 Fetch APi 时如何设置请求头的 content-type

【中文标题】使用 Fetch APi 时如何设置请求头的 content-type

【英文标题】：How to set the content-type of request header when using Fetch APi

【发布时间】：2016-11-04 12:07:07

【问题描述】：

我正在使用 npm 'isomorphic-fetch' 来发送请求。我遇到的问题是我无法设置请求标头的内容类型。

我设置了 application/json 的内容类型，但是请求标头被设置为 text/plain。

import 'isomorphic-fetch';

  sendRequest(url, method, body) 
    const options = 
      method: method,
      headers:'content-type': 'application/json',
      mode: 'no-cors'
    ;

    options.body = JSON.stringify(body);

    return fetch(url, options);
  

当我在浏览器中检查请求时，内容类型为 o：

content-type:text/plain;charset=UTF-8

谁能解释为什么我不能设置这个属性？

【参考方案1】：

您需要创建一个 fetch headers 对象。

sendRequest(url, method, body) 
    const options = 
        method: method,
        headers: new Headers('content-type': 'application/json'),
        mode: 'no-cors'
    ;

    options.body = JSON.stringify(body);

    return fetch(url, options);

【讨论】：

这个语法没问题headers: "Content-Type": "application/json" ,

@RTS ：如果您包含凭据，这似乎不起作用。

【参考方案2】：

看完下面的文章我找到了答案：

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Headers

警卫

由于 headers 可以在请求中发送并在响应中接收，并且对于哪些信息可以和应该是可变的有各种限制，所以 headers 对象具有保护属性。这不会暴露给 Web，但会影响 headers 对象上允许的突变操作。

可能的保护值是：

none：默认。 request：保护从请求中获得的标头对象 (Request.headers)。 request-no-cors：保护从使用Request.modeno-cors 创建的请求中获得的标头对象。 response：保护从响应中获得的标头 (Response.headers)。 immutable：多用于ServiceWorkers；以只读方式呈现 headers 对象。

注意：您不能附加或设置 request 受保护的标头的 Content-Length 标头。同样，不允许在响应头中插入Set-Cookie：ServiceWorkers 不允许通过合成响应设置 cookie。

When the options mode property is set to no-cors the request header values are immutable.

相反，我将 mode 属性设置为 cors。

【讨论】：

是的，但是当你想要不使用cors的时候？你怎么说我想将json数据发送到另一个域的端点？