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
|
---
title: Headers
slug: Web/API/Headers
tags:
- API
- Experimental
- Fetch
- Fetch API
- Headers
- Headers API
- Interface
- Reference
translation_of: Web/API/Headers
---
<div>{{APIRef("Fetch API")}}</div>
<p>L'interface <code>Headers</code> de l'API Fetch vous permet d'effectuer diverses actions sur les en-têtes de requête et de réponse HTTP. Ces actions incluent la récupération, la configuration, l’ajout et la suppression. Un objet <code>Headers</code> a une liste <code>Headers</code> associée qui est vide lors de l'initialisation et qui est constituée de zéro ou plusieurs paires de noms et de valeurs. Vous pouvez en ajouter via les méthodes comme<span style="line-height: 19.0909080505371px;">{{domxref("Headers.append","append()")}} (see {{anch("Examples")}}.) Dans toutes les méthodes de cette interface, les noms des <code>Headers</code> sont reliés à une séquence d'octets sensible à la case.</span></p>
<p>Pour des raisons de sécurité, les <code>Headers</code> ci-dessous peuvent être controlés uniquement par l'User Agent : {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}.</p>
<p>Un objet <code>Headers</code> a aussi une garde associée, qui prend la valeur <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>reponse</code>, or <code>none</code>. Cela affecte si les méthodes {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, et {{domxref("Headers.append","append()")}} vont modifier le <code>Header</code>. Pour plus d'informations voir {{Glossary("Guard")}}.</p>
<p>Vous pouvez récuperer un objet <code>Header</code> via les propriétés {{domxref("Request.headers")}} et {{domxref("Response.headers")}} et créer un nouvel objet <code>Header</code> en utilisant le constructeur {{domxref("Headers.Headers()")}}.</p>
<p>Un objet implémentant <code>Headers</code> peut directement être utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de{{domxref('Headers.entries()', 'entries()')}}: <code>for (var p of myHeaders)</code> est équivalent à <code>for (var p of myHeaders.entries())</code>.</p>
<div class="note">
<p><strong>Note</strong>: Vous pouvez trouver plus d'informations à propos des Headers disponibles en lisant la page suivante : <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a>.</p>
</div>
<h2 id="Constructeur">Constructeur</h2>
<dl>
<dt>{{domxref("Headers.Headers()", "Headers()")}}</dt>
<dd>Crée un nouvel objet <code>Headers</code>.</dd>
</dl>
<h2 id="Méthodes">Méthodes</h2>
<dl>
<dt>{{domxref("Headers.append()")}}</dt>
<dd>Ajoute une nouvelle valeur à un Header existant dans un objet <code>Headers</code>, ou ajoute le header s'il n'existe pas déjà.</dd>
<dt>{{domxref("Headers.delete()")}}</dt>
<dd>Supprime un header dans un objet <code>Headers</code>.</dd>
<dt>{{domxref("Headers.entries()")}}</dt>
<dd>Retourne un {{jsxref("Iteration_protocols","iterator")}} permettant d'acceder à toutes les paires clef/valeur contenue dans cet objet.</dd>
<dt>{{domxref("Headers.forEach()")}}</dt>
<dd>Exécute une fonction fournie une fois pour chaque élément du tableau.</dd>
<dt>{{domxref("Headers.get()")}}</dt>
<dd>Retourne une séquence {{domxref("ByteString")}} de toutes les valeurs d'un Header dans un objet <code>Headers</code> avec un nom donné.</dd>
<dt>{{domxref("Headers.has()")}}</dt>
<dd>Retourne un booléen indiquant si un objet <code>Headers</code> contient un certain header.</dd>
<dt>{{domxref("Headers.keys()")}}</dt>
<dd>Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les clefs des paires clef/valeur contenues dans cet objet.</dd>
<dt>{{domxref("Headers.set()")}}</dt>
<dd>Définti une nouvelle valeur pour un header existant dans un objet <code>Headers</code>, ou ajoute le header s'il n'existe pas déjà.</dd>
<dt>{{domxref("Headers.values()")}}</dt>
<dd>Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les valeurs des paires clefs/valeur contenues dans cet objet.</dd>
</dl>
<div class="note">
<p><strong>Note</strong>: Poue être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs, {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code.</p>
</div>
<div class="note">
<p><strong>Note</strong>: Toutes les méthodes Headers vont retourner <code>TypeError</code> si vous essayez de passer dans une réfférenceun nom qui n'est pas un <a href="https://fetch.spec.whatwg.org/#concept-header-name">nom de Header HTTP valide</a>. Les opérations de mutation vont retourner <code>TypeError</code> si le header a un {{Glossary("Guard")}} immuable. Dans tous les autres cas, les erreurs sont silencieuses.</p>
</div>
<div class="note">
<p><strong>Note</strong>: Lorsque les valeurs d'en-tête sont itérées, elles sont automatiquement triées par ordre lexicographique et les valeurs des noms d'en-tête en double sont combinées.</p>
</div>
<h3 id="Méthodes_obsolètes">Méthodes obsolètes</h3>
<dl>
<dt>{{domxref("Headers.getAll()")}}</dt>
<dd>Utilisée pour retourner un array de toutes les valeurs d'un header dans un objet <code>Headers</code> avec un nom donné. Cette méthode est maintenant supprimée des standards, et {{domxref("Headers.get()")}} retourne maintenant toutes les valeurs d'un nom donné au lieu du premier seulement.</dd>
</dl>
<h2 id="Exemples">Exemples</h2>
<p>Dans le fragment de code suivant, nous créons un nouvel Header en utilisant le contructeur <code>Headers()</code>, ajoutons un nouvel header à ce dernier en utilisant <code>append()</code>, puis retournons la valeur du header en utilisant <code>get()</code> :</p>
<pre class="brush: js notranslate">var monHeader = new Headers();
monHeader.append('Content-Type', 'text/xml');
monHeader.get('Content-Type') // doit retourner 'text/xml'
</pre>
<p>La même chose peut être accomplie en passant par un array d'array <span class="tlid-translation translation" lang="fr"><span title="">un littéral d'objet au constructeur.</span></span></p>
<pre class="brush: js notranslate">var mesHeaders = new Headers({
'Content-Type': 'text/xml'
});
// ou, en utilisant un array d'array
mesHeaders = new Headers([
['Content-Type', 'text/xml']
]);
mesHeaders.get('Content-Type') // doit retourner 'text/xml'
</pre>
<h2 id="Caractéristiques">Caractéristiques</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Caractéristiques</th>
<th scope="col">Statut</th>
<th scope="col">Commentaires</th>
</tr>
<tr>
<td>{{SpecName('Fetch','#headers-class','Headers')}}</td>
<td>{{Spec2('Fetch')}}</td>
<td></td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{Compat("api.Headers")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/en-US/docs/Web/API/ServiceWorker_API">API ServiceWorker</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>
|
