Headers: Headers() コンストラクター

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.

メモ: この機能はウェブワーカー内で利用可能です。

Headers() コンストラクターは、新しい Headers オブジェクトを生成します。

構文

js
new Headers()
new Headers(init)

引数

init 省略可

Headers オブジェクトに事前に入力したい、任意の HTTP ヘッダーを含むオブジェクトです。これは文字列の値を持つ単純なオブジェクトリテラル、名前と値の組の配列(各組は 2 つの要素を持つ文字列の配列)、あるいは既存の Headers オブジェクトになります。最後の場合は、新しい Headers オブジェクトは既存の Headers オブジェクトからそのデータをコピーします。

簡単に空の Headers オブジェクトを生成できます。

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

Headers.append を使用してヘッダーを追加できます。

js
myHeaders.append("Content-Type", "image/jpeg");
myHeaders.get("Content-Type"); // 'image/jpeg' が返される

または、Headers オブジェクトの生成時に必要なヘッダーを追加することもできます。次のスニペットでは、新しい Headers を作成し、コンストラクターに初期化オブジェクトを引数として渡してヘッダーを追加しています。

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

最初の Headers を初期化オブジェクトとして渡して、別の Headers オブジェクトを生成できます。

js
const secondHeadersObj = new Headers(myHeaders);
secondHeadersObj.get("Content-Type"); // 'image/jpeg' が返される。最初のヘッダーオブジェクトから継承している

また、Headers オブジェクトを作成する際に、二次元配列を使用して、同じ値を持つ複数のヘッダーを追加することができます。以下のスニペットでは、コンストラクターの引数に初期化配列を渡して、複数の Set-Cookie ヘッダーを持つ新しい Headers オブジェクトを作成しています。

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

仕様書

Specification
Fetch
# ref-for-dom-headers①

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
Headers() constructor

Legend

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

Full support
Full support

関連情報