Headers: Headers() constructor

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Note: This feature is available in Web Workers.

The Headers() constructor creates a new Headers object.

Syntax

js
new Headers()
new Headers(init)

Parameters

init Optional

An object containing any HTTP headers that you want to pre-populate your Headers object with. This can be a simple object literal with String values, an array of name-value pairs, where each pair is a 2-element string array; or an existing Headers object. In the last case, the new Headers object copies its data from the existing Headers object.

Examples

Creating an empty Headers object is simple:

js
const myHeaders = new Headers(); // Currently empty

You could add a header to this using Headers.append:

js
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.get("Content-Type"); // Returns 'image/jpeg'

Or you can add the headers you want as the Headers object is created. In the following snippet we create a new Headers object, adding some headers by passing the constructor an init object as an argument:

js
const httpHeaders = {
  "Content-Type": "image/jpeg",
  "X-My-Custom-Header": "Zeke are cool",
};
const myHeaders = new Headers(httpHeaders);

You can now create another Headers object, passing it the first Headers object as its init object:

js
const secondHeadersObj = new Headers(myHeaders);
secondHeadersObj.get("Content-Type"); // Would return 'image/jpeg' — it inherits it from the first headers object

You can also add the headers you want as the Headers object is created by using a two-dimensional array to add multiple headers with the same values. In the following snippet we create a new Headers object with multiple Set-Cookie headers by passing the constructor an init array as an argument:

js
const headers = [
  ["Set-Cookie", "greeting=hello"],
  ["Set-Cookie", "name=world"],
];
const myHeaders = new Headers(headers);

Specifications

Specification
Fetch
# ref-for-dom-headers①

Browser compatibility

desktop mobile server
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Bun
Deno
Node.js
Headers() constructor
Chrome – Full support
Chrome 42 (Release date: 2015-04-14)
footnote Full support
Edge – Full support
Edge 14 (Release date: 2016-08-02)
footnote Full support
Firefox – Full support
Firefox 39 (Release date: 2015-07-02)
footnote Full support
Opera – Full support
Opera 29 (Release date: 2015-04-28)
footnote Full support
Safari – Full support
Safari 10.1 (Release date: 2017-03-27)
footnote Full support
Chrome Android – Full support
Chrome Android 42 (Release date: 2015-04-15)
footnote Full support
Firefox for Android – Full support
Firefox for Android 39 (Release date: 2015-07-02)
footnote Full support
Opera Android – Full support
Opera Android 29 (Release date: 2015-04-28)
footnote Full support
Safari on iOS – Full support
Safari on iOS 10.3 (Release date: 2017-03-27)
footnote Full support
Samsung Internet – Full support
Samsung Internet 4 (Release date: 2016-03-11)
footnote Full support
WebView Android – Full support
WebView Android 42 (Release date: 2015-04-15)
footnote Full support
WebView on iOS – Full support
WebView on iOS 10.3 (Release date: 2017-03-27)
footnote Full support
Bun – Full support
Bun 1 (Release date: 2023-09-08)
footnote Full support
Deno – Full support
Deno 1 (Release date: 2020-05-13)
footnote Full support
Node.js – Full support
Node.js 18 (Release date: 2022-04-19)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also