文件在线预览HTTP响应头设置

古城微笑少年丶 2021-12-11 05:19 713阅读 0赞

# 1、Content-Type #

**`Content-Type`** 实体头部用于指示资源的MIME类型 [media type][] 。

在响应中，Content-Type标头告诉客户端实际返回的内容的内容类型。浏览器会在某些情况下进行MIME查找，并不一定遵循此标题的值; 为了防止这种行为，可以将标题 [`X-Content-Type-Options`][X-Content-Type-Options] 设置为 **nosniff**。

在请求中 (如[`POST`][POST] 或 [`PUT`][PUT])，客户端告诉服务器实际发送的数据类型。

<table> 
 <tbody> 
  <tr> 
   <th>Header type</th> 
   <td><a href="https://developer.mozilla.org/en-US/docs/Glossary/Entity_header" rel="nofollow">Entity header</a></td> 
  </tr> 
  <tr> 
   <th><a href="https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name" rel="nofollow">Forbidden header name</a></th> 
   <td>no</td> 
  </tr> 
  <tr> 
   <th><a href="https://developer.mozilla.org/en-US/docs/Glossary/Simple_response_header" rel="nofollow">CORS-safelisted response-header</a></th> 
   <td>yes</td> 
  </tr> 
 </tbody> 
</table>

## 句法[节][Link 1] ##

Content-Type: text/html; charset=utf-8
    Content-Type: multipart/form-data; boundary=something

## 指令[节][Link 2] ##

`media-type`

资源或数据的 [MIME type][] 。

charset

字符编码标准。

boundary

对于多部分实体，boundary 是必需的，其包括来自一组字符的1到70个字符，已知通过电子邮件网关是非常健壮的，而不是以空白结尾。它用于封装消息的多个部分的边界。

## 例子[节][Link 3] ##

### `Content-Type` 在HTML表单中[节][Link 4] ###

在通过HTML form提交生成的[`POST`][POST]请求中，请求头的Content-Type由[`<form>`][form]元素上的enctype属性指定

<form action="/" method="post" enctype="multipart/form-data">
      <input type="text" name="description" value="some text">
      <input type="file" name="myFile">
      <button type="submit">Submit</button>
    </form>

请求头看起来像这样（在这里省略了一些 headers）：

POST /foo HTTP/1.1
    Content-Length: 68137
    Content-Type: multipart/form-data; boundary=---------------------------974767299852498929531610575
    
    ---------------------------974767299852498929531610575
    Content-Disposition: form-data; name="description" 
    
    some text
    ---------------------------974767299852498929531610575
    Content-Disposition: form-data; name="myFile"; filename="foo.txt" 
    Content-Type: text/plain 
    
    (content of the uploaded file foo.txt)
    ---------------------------974767299852498929531610575

常用的MIME类型：[http://www.iana.org/assignments/media-types/media-types.xhtml][http_www.iana.org_assignments_media-types_media-types.xhtml]

# 2、Content-Disposition #

在常规的HTTP应答中，`Content-Disposition` 消息头指示回复的内容该以何种形式展示，是以**内联**的形式（即网页或者页面的一部分），还是以**附件**的形式下载并保存到本地。

在multipart/form-data类型的应答消息体中， **`Content-Disposition`** 消息头可以被用在multipart消息体的子部分中，用来给出其对应字段的相关信息。各个子部分由在[`Content-Type`][Content-Type]中定义的**分隔符**分隔。用在消息体自身则无实际意义。

Content-Disposition消息头最初是在MIME标准中定义的，HTTP表单及[`POST`][POST] 请求只用到了其所有参数的一个子集。只有`form-data`以及可选的`name`和`filename`三个参数可以应用在HTTP场景中。

<table> 
 <tbody> 
  <tr> 
   <th>Header type</th> 
   <td><a href="https://developer.mozilla.org/en-US/docs/Glossary/Response_header" rel="nofollow">Response header</a>&nbsp;(for the main body)<br><a href="https://developer.mozilla.org/en-US/docs/Glossary/General_header" rel="nofollow">General header</a>&nbsp;(for a subpart of a multipart body)</td> 
  </tr> 
  <tr> 
   <th><a href="https://developer.mozilla.org/en-US/docs/Glossary/Forbidden_header_name" rel="nofollow">Forbidden header name</a></th> 
   <td>no</td> 
  </tr> 
 </tbody> 
</table>

## 语法[节][Link 5] ##

### 作为消息主体中的消息头[节][Link 6] ###

在HTTP场景中，第一个参数或者是`inline`（默认值，表示回复中的消息体会以页面的一部分或者整个页面的形式展示），或者是`attachment`（意味着消息体应该被下载到本地；大多数浏览器会呈现一个“保存为”的对话框，将`filename`的值预填为下载后的文件名，假如它存在的话）。

Content-Disposition: inline
    Content-Disposition: attachment
    Content-Disposition: attachment; filename="filename.jpg"

### 作为multipart body中的消息头[节][Link 7] ###

在HTTP场景中。第一个参数总是固定不变的`form-data`；附加的参数不区分大小写，并且拥有参数值，参数名与参数值用等号(=)连接，参数值用双引号括起来。参数之间用分号(;)分隔。

Content-Disposition: form-data
    Content-Disposition: form-data; name="fieldName"
    Content-Disposition: form-data; name="fieldName"; filename="filename.jpg"

### 指令[节][Link 8] ###

`name`

后面是一个表单字段名的字符串，每一个字段名会对应一个子部分。在同一个字段名对应多个文件的情况下（例如，带有`multiple` 属性的`<input type=file>`元素），则多个子部分共用同一个字段名。如果name参数的值为 `'_charset_'` ，意味着这个子部分表示的不是一个HTML字段，而是在未明确指定字符集信息的情况下各部分使用的默认字符集。

`filename`

后面是要传送的文件的初始名称的字符串。这个参数总是可选的，而且不能盲目使用：路径信息必须舍掉，同时要进行一定的转换以符合服务器文件系统规则。这个参数主要用来提供展示性信息。当与 `Content-Disposition: attachment` 一同使用的时候，它被用作"保存为"对话框中呈现给用户的默认文件名。

filename\*

"filename" 和 "filename\*" 两个参数的唯一区别在于，"filename\*"采用了  [RFC 5987][] 中规定的编码方式。当"filename" 和 "filename\*" 同时出现的时候，应该优先采用"filename\*"，假如二者都支持的话。

## 示例[节][Link 9] ##

以下是一则可以触发"保存为"对话框的服务器应答：

200 OK
    Content-Type: text/html; charset=utf-8
    Content-Disposition: attachment; filename="cool.html"
    Content-Length: 22
    
    <HTML>Save me!</HTML>

这个简单的HTML文件会被下载到本地而不是在浏览器中展示。大多数浏览器默认会建议将`cool.html`作为文件名。

以下是一个HTML表单的示例，展示了在 `multipart/form-data` format 格式的报文中使用`Content-Disposition` 消息头的情况：

POST /test.html HTTP/1.1
    Host: example.org
    Content-Type: multipart/form-data;boundary="boundary"
    
    --boundary
    Content-Disposition: form-data; name="field1"
    
    value1
    --boundary
    Content-Disposition: form-data; name="field2"; filename="example.txt"
    
    value2
    --boundary--

参考文档：

\[MDN web docs\] [https://developer.mozilla.org/zh-CN/docs/Web/HTTP][https_developer.mozilla.org_zh-CN_docs_Web_HTTP]

[media type]: https://developer.mozilla.org/en-US/docs/Glossary/MIME_type
[X-Content-Type-Options]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Content-Type-Options
[POST]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/POST
[PUT]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods/PUT
[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Type#%E5%8F%A5%E6%B3%95
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Type#%E6%8C%87%E4%BB%A4
[MIME type]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
[Link 3]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Type#%E4%BE%8B%E5%AD%90
[Link 4]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Type#Content-Type_%E5%9C%A8HTML%E8%A1%A8%E5%8D%95%E4%B8%AD
[form]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/form
[http_www.iana.org_assignments_media-types_media-types.xhtml]: http://www.iana.org/assignments/media-types/media-types.xhtml
[Content-Type]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Type
[Link 5]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition#%E8%AF%AD%E6%B3%95
[Link 6]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition#%E4%BD%9C%E4%B8%BA%E6%B6%88%E6%81%AF%E4%B8%BB%E4%BD%93%E4%B8%AD%E7%9A%84%E6%B6%88%E6%81%AF%E5%A4%B4
[Link 7]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition#%E4%BD%9C%E4%B8%BAmultipart_body%E4%B8%AD%E7%9A%84%E6%B6%88%E6%81%AF%E5%A4%B4
[Link 8]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition#%E6%8C%87%E4%BB%A4
[RFC 5987]: https://tools.ietf.org/html/rfc5987
[Link 9]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Disposition#%E7%A4%BA%E4%BE%8B
[https_developer.mozilla.org_zh-CN_docs_Web_HTTP]: https://developer.mozilla.org/zh-CN/docs/Web/HTTP