1. 導入
Web開発において、外部APIとの通信は避けて通れません。現代のフロントエンドではFetch APIが主流ですが、リクエストを細かく制御しようとすると「ヘッダーの扱い」で躓くことがよくあります。特に認証トークンの付与や、コンテンツタイプ（Content-Type）の指定は、Webアプリのセキュリティと整合性を保つための必須課題です。本記事では、Requestオブジェクトが持つheadersプロパティを正しく操作し、堅牢な通信を行う方法を解説します。
2. 基礎知識
Fetch APIでリクエストを作成する際、その実体は「Requestクラス」のインスタンスです。このクラスが持つ「headers」プロパティは、Headersオブジェクトという特殊なインターフェースで管理されています。
Headersオブジェクトは、HTTPヘッダーを辞書のように扱える仕組みです。通常のオブジェクトと異なり、大文字・小文字を区別しない「小文字正規化」が行われるため、例えば「Content-Type」と「content-type」を同じものとして扱えるという特徴があります。
3. 実装/解決策
headersプロパティを操作するには、コンストラクタで初期値を渡す方法と、生成後にappendやsetメソッドを使う方法の2通りがあります。
ポイントは、Requestインスタンスを生成する前にヘッダーを定義しておくことです。一度Requestオブジェクトを生成した後のヘッダー操作は、イミュータブル（不変）な属性が含まれる場合があるため、生成時の初期化を推奨します。
4. サンプルプログラム
以下のコードは、認証トークンを含めたJSON形式のデータを送信するリクエストの作成例です。
// ヘッダーを定義
const myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json');
myHeaders.append('Authorization', 'Bearer YOUR_ACCESS_TOKEN');
// Requestオブジェクトを作成
const request = new Request('https://api.example.com/data', {
method: 'POST',
headers: myHeaders, // ヘッダーをセット
body: JSON.stringify({ name: 'フロントエンド太郎' })
});
// 実際に通信を行う
fetch(request)
.then(response => response.json())
.then(data => console.log('成功:', data))
.catch(error => console.error('エラー:', error));
5. 応用・注意点
現場でよくある失敗として、「カスタムヘッダーの送信時にCORS（Cross-Origin Resource Sharing）でブロックされる」という事象があります。ブラウザは、許可されていないカスタムヘッダーが含まれていると、プリフライトリクエストを送信してサーバーに確認を求めます。もしAPI側がそのヘッダーを許可していない場合、通信はエラーになります。
また、Headersオブジェクトは「get」メソッドで値を取得できますが、存在しない場合はnullを返すため、if文で存在チェックを行う癖をつけておくとバグを防げます。特に共通のAPIクライアントを作成する際は、これらのメソッドをラップしたユーティリティ関数を用意しておくと、コードの保守性が格段に向上します。