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
|
---
title: Headers
slug: Web/API/Headers
tags:
- API
- Experimental
- Fetch
- Headers
- Interface
- Reference
translation_of: Web/API/Headers
---
<div>{{ APIRef("Fetch") }}</div>
<div>La interfaz <strong><code>Headers</code></strong> de la <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> permite realizar diversas acciones en los Headers de solicitud y respuesta HTTP.Estas acciones incluyen recuperar, establecer, agregar y eliminar. Un objeto <code>Header</code> tiene una lista asociada que inicialmente está vacía, y consta de cero o más pares de nombre y valor.</div>
<div>Es posible añadir metodos de uso como <span style="line-height: 19.0909080505371px;">{{domxref("Headers.append","append()")}} (ver{{anch(" ejemplos")}}.) En todos los métodos de esta interfaz, los nombres de los encabezados se relacionan con una secuencia de bytes sensible a mayúsculas y minúsculas.</span></div>
<div>Por razones de seguridad, algunos headers pueden ser controlados unicamente por el <strong>user agent</strong>. Estos headers incluyen los {{Glossary("Forbidden_header_name", "nombres prohibidos para headers", 1)}} y {{Glossary("Forbidden_response_header_name", "nombres prohibidos de Headers response", 1)}}.</div>
<p>A Headers object also has an associated guard, which takes a value of <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>response</code>, or <code>none</code>. This affects whether the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods will mutate the header. For more information see {{Glossary("Guard")}}.</p>
<p>You can retrieve a <code>Headers</code> object via the {{domxref("Request.headers")}} and {{domxref("Response.headers")}} properties, and create a new <code>Headers</code> object using the {{domxref("Headers.Headers()")}} constructor.</p>
<p>An object implementing <code>Headers</code> can directly be used in a {{jsxref("Statements/for...of", "for...of")}} structure, instead of {{domxref('Headers.entries()', 'entries()')}}: <code>for (var p of myHeaders)</code> is equivalent to <code>for (var p of myHeaders.entries())</code>.</p>
<div class="note">
<p><strong>Note</strong>: you can find more out about the available headers by reading our <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a> reference.</p>
</div>
<h2 id="Constructor">Constructor</h2>
<dl>
<dt>{{domxref("Headers.Headers()")}}</dt>
<dd>Creates a new <code>Headers</code> object.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<dl>
<dt>{{domxref("Headers.append()")}}</dt>
<dd>Appends a new value onto an existing header inside a <code>Headers</code> object, or adds the header if it does not already exist.</dd>
<dt>{{domxref("Headers.delete()")}}</dt>
<dd>Deletes a header from a <code>Headers</code> object.</dd>
<dt>{{domxref("Headers.entries()")}}</dt>
<dd>Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.</dd>
<dt>{{domxref("Headers.forEach()")}}</dt>
<dd>Executes a provided function once for each array element.</dd>
<dt>{{domxref("Headers.get()")}}</dt>
<dd>Returns a {{domxref("ByteString")}} sequence of all the values of a header within a <code>Headers</code> object with a given name.</dd>
<dt>{{domxref("Headers.has()")}}</dt>
<dd>Returns a boolean stating whether a <code>Headers</code> object contains a certain header.</dd>
<dt>{{domxref("Headers.keys()")}}</dt>
<dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all keys of the key/value pairs contained in this object.</dd>
<dt>{{domxref("Headers.set()")}}</dt>
<dd>Sets a new value for an existing header inside a <code>Headers</code> object, or adds the header if it does not already exist.</dd>
<dt>{{domxref("Headers.values()")}}</dt>
<dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all values of the key/value pairs contained in this object.</dd>
</dl>
<div class="note">
<p><strong>Note</strong>: To be clear, the difference between {{domxref("Headers.set()")}} and {{domxref("Headers.append()")}} is that if the specified header does already exist and does accept multiple values, {{domxref("Headers.set()")}} will overwrite the existing value with the new one, whereas {{domxref("Headers.append()")}} will append the new value onto the end of the set of values. See their dedicated pages for example code.</p>
</div>
<div class="note">
<p><strong>Note</strong>: All of the Headers methods will throw a <code>TypeError</code> if you try to pass in a reference to a name that isn't a <a href="https://fetch.spec.whatwg.org/#concept-header-name">valid HTTP Header name</a>. The mutation operations will throw a <code>TypeError</code> if the header has an immutable {{Glossary("Guard")}}. In any other failure case they fail silently.</p>
</div>
<div class="note">
<p><strong>Note</strong>: When Header values are iterated over, they are automatically sorted in lexicographical order, and values from duplicate header names are combined.</p>
</div>
<h3 id="Obsolete_methods">Obsolete methods</h3>
<dl>
<dt>{{domxref("Headers.getAll()")}}</dt>
<dd>Used to return an array of all the values of a header within a <code>Headers</code> object with a given name; this method has now been deleted from the spec, and {{domxref("Headers.get()")}} now returns all values instead of just one.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<p>In the following snippet, we create a new header using the <code>Headers()</code> constructor, add a new header to it using <code>append()</code>, then return that header value using <code>get()</code>:</p>
<pre class="brush: js">var myHeaders = new Headers();
myHeaders.append('Content-Type', 'text/xml');
myHeaders.get('Content-Type') // should return 'text/xml'
</pre>
<p>The same can be achieved by passing an array of arrays or an object literal to the constructor:</p>
<pre class="brush: js">var myHeaders = new Headers({
'Content-Type': 'text/xml'
});
// or, using an array of arrays:
myHeaders = new Headers([
['Content-Type', 'text/xml']
]);
myHeaders.get('Content-Type') // should return 'text/xml'
</pre>
<h2 id="Specifications">Specifications</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="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("api.Headers")}}</p>
<h2 id="See_also">See also</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>
|
