---
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>