{{ APIRef("Fetch") }}{{ SeeCompatTable() }}
The Headers
interface of the Fetch API represents response/request headers, allowing you to query them and take different actions depending on the results.
A Headers
object has an associated header list, which is initially empty. You can add to this using methods like {{domxref("Headers.append","append()")}} (see {{anch("Examples")}}.)
A Headers object also has an associated guard, which takes a value of immutable
, request
, request-no-cors
, response
, or none
. 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")}}.
You can retrieve a Headers
object via the {{domxref("Request.headers")}} and {{domxref("Response.headers")}} properties, and create a new Headers
object using the {{domxref("Headers.Headers()")}} constructor.
Note: you can find more out about the available headers by reading our HTTP headers reference.
Constructor
- {{domxref("Headers.Headers()")}}
- Creates a new
Headers
object.
Methods
- {{domxref("Headers.append()")}}
- Appends a new value onto an existing header inside a
Headers
object, or adds the header if it does not already exist. - {{domxref("Headers.delete()")}}
- Deletes a header from a
Headers
object. - {{domxref("Headers.get()")}}
- Returns the first value of a given header from within a
Headers
object. - {{domxref("Headers.getAll()")}}
- Returns an array of all the values of a header within a
Headers
object with a given name. - {{domxref("Headers.has()")}}
- Returns a boolean stating whether a
Headers
object contains a certain header. - {{domxref("Headers.set()")}}
- Sets a new value for an existing header inside a
Headers
object, or adds the header if it does not already exist.
Note: 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.
Note: All of the Headers methods will throw a TypeError
if you try to pass in a reference to a name that isn't a valid HTTP Header name. The mutation operations will throw a TypeError
if the header has an immutable {{Glossary("Guard")}}. In any other failure case they fail silently.
Examples
In the following snippet, we create a new header using the Headers()
constructor, add a new header to it using append()
, then return that header value using get()
:
var myHeaders = new Headers(); myHeaders.append('Content-Type', 'text/xml'); myHeaders.get('Content-Type') // should return 'text/xml'
Specifications
Specification | Status | Comment |
---|---|---|
{{SpecName('Fetch','#headers-class','Headers')}} | {{Spec2('Fetch')}} |
Browser compatibility
{{ CompatibilityTable() }}
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | {{ CompatChrome(42) }} {{ CompatChrome(41) }} behind pref |
{{ CompatGeckoDesktop(39)}} 34 behind pref |
{{ CompatNo }} |
29 |
{{ CompatNo }} |
Feature | Android | Firefox Mobile (Gecko) | Firefox OS (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|
Basic support | {{ CompatNo }} | {{ CompatNo }} | {{ CompatNo }} | {{ CompatNo }} | {{ CompatNo }} | {{ CompatNo }} | {{ CompatNo }} |
See also