1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
|
---
title: Headers
slug: Web/API/Headers
tags:
- Headers
- Headers API
- application/json
- 头信息
translation_of: Web/API/Headers
---
<p>{{ APIRef("Fetch") }}</p>
<p><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> 的 <strong>Headers </strong>接口允许您对HTTP请求和响应头执行各种操作。 这些操作包括检索，设置，添加和删除。 一个Headers对象具有关联的头列表，它最初为空，由零个或多个键值对组成。你可以使用<span style="line-height: 19.0909080505371px;"> </span>{{domxref("Headers.append","append()")}} <span style="line-height: 19.0909080505371px;">方法添加 </span>之类的方法添加到此(参见 {{anch("Examples")}})。在该接口的所有方法中，标题名称由不区分大小写的字节序列匹配。</p>
<p>出于安全考虑，某些头只能由用户代理控制。这些头信息包括 {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} 和 {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}。</p>
<p>一个Headers对象也有一个关联的guard，它具有不可变的值，<code>request</code>，<code>request-no-cors</code>，<code>response</code>或<code>none</code>。 这会影响 {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, 和{{domxref("Headers.append","append()")}} 方法 改变header. 参考更多信息,请看 {{Glossary("Guard")}}.</p>
<p>你可以通过 {{domxref("Request.headers")}} 和{{domxref("Response.headers")}} 属性检索一个<code>Headers</code>对象, 并使用 {{domxref("Headers.Headers()")}} 构造函数创建一个新的<code>Headers</code> 对象.</p>
<p>一个实现了<code>Headers</code> 的对象可以直接用于 {{jsxref("Statements/for...of", "for...of")}} 结构中, 而不是 {{domxref('Headers.entries()', 'entries()')}}: <code>for (var p of myHeaders)</code> 等价于 <code>for (var p of myHeaders.entries())</code>.</p>
<div class="note">
<p><strong>Note</strong>: 您可以通过阅读我们的 <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a>参考找到更多关于可用headers的信息。</p>
</div>
<h2 id="构造函数">构造函数</h2>
<dl>
<dt>{{domxref("Headers.Headers()")}}</dt>
<dd>创建一个新的Headers对象.</dd>
</dl>
<h2 id="方法">方法</h2>
<dl>
<dt>{{domxref("Headers.append()")}}</dt>
<dd>给现有的header添加一个值, 或者添加一个未存在的header并赋值.</dd>
<dt>{{domxref("Headers.delete()")}}</dt>
<dd>从Headers对象中删除指定header.</dd>
<dt>{{domxref("Headers.entries()")}}</dt>
<dd>以 {{jsxref("Iteration_protocols","迭代器")}} 的形式返回Headers对象中所有的键值对.</dd>
<dt>{{domxref("Headers.get()")}}</dt>
<dd>以 {{domxref("ByteString")}} 的形式从Headers对象中返回指定header的全部值.</dd>
<dt>{{domxref("Headers.has()")}}</dt>
<dd>以布尔值的形式从Headers对象中返回是否存在指定的header.</dd>
<dt>{{domxref("Headers.keys()")}}</dt>
<dd>以{{jsxref("Iteration_protocols", "迭代器")}}的形式返回Headers对象中所有存在的header名.</dd>
<dt>{{domxref("Headers.set()")}}</dt>
<dd>替换现有的header的值, 或者添加一个未存在的header并赋值.</dd>
<dt>{{domxref("Headers.values()")}}</dt>
<dd>以{{jsxref("Iteration_protocols", "迭代器")}}的形式返回Headers对象中所有存在的header的值.</dd>
</dl>
<div class="note">
<p><strong>Note</strong>: 值得注意的是,在header已存在或者有多个值的状态下{{domxref("Headers.set()")}} 和 {{domxref("Headers.append()")}}的使用有如下区别, {{domxref("Headers.set()")}} 将会用新的值覆盖已存在的值, 但是{{domxref("Headers.append()")}}会将新的值添加到已存在的值的队列末尾. 请参相关词条内的示例代码.</p>
</div>
<div class="note">
<p><strong>Note</strong>:如果您尝试传入名称不是<a href="https://fetch.spec.whatwg.org/#concept-header-name">有效的HTTP头名称</a>的引用，则所有Headers方法都将引发 <code>TypeError</code> 。 如果头部有一个不变的{{Glossary("Guard")}}，则变异操作将会抛出一个 <code>TypeError</code> 。 在其他任何失败的情况下，他们默默地失败。</p>
</div>
<h3 id="Obsolete_methods">Obsolete methods</h3>
<dl>
<dt>{{domxref("Headers.getAll()")}}</dt>
<dd>用于返回具有给定名称的 <code>Headers</code> 对象中所有值的数组; 这个方法现在已经从规范中删除了，{{domxref("Headers.get()")}} 方法现在返回所有的值而不是一个。</dd>
</dl>
<h2 id="范例">范例</h2>
<p>在这个小示例中, 我们将会通过Headers构造函数创建一个新的header, 先使用append()方法添加一个header, 然后通过get()方法返回这个header的值</p>
<pre class="brush: js">let myHeaders = new Headers();
myHeaders.append('Content-Type', 'text/xml');
myHeaders.get('Content-Type');
// should return 'text/xml'
</pre>
<h2 id="规范">规范</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Fetch','#headers-class','Headers')}}</td>
<td>{{Spec2('Fetch')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatChrome(42) }}<br>
{{ CompatChrome(41) }} behind pref<br>
</td>
<td>{{ CompatGeckoDesktop(39)}}<br>
34 behind pref</td>
<td>{{ CompatNo }}</td>
<td>
<p>29<br>
28 behind pref</p>
</td>
<td>{{ CompatNo }}</td>
</tr>
<tr>
<td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoDesktop(44)}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
<th>Chrome for Android</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
<td>{{ CompatNo }}</td>
</tr>
<tr>
<td><code>entries()</code>, <code>keys()</code>, <code>values()</code>, and support of <code>for...of</code></td>
<td>{{CompatUnknown}}</td>
<td>{{ CompatGeckoMobile(44)}}</td>
<td>2.5</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="相关链接">相关链接</h2>
<ul>
<li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li>
<li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li>
<li><a href="/en-US/docs/Web/HTTP">HTTP</a></li>
</ul>
<p> </p>
|
