ヘッダーとは何でしょうか

Question

表題の通りヘッダーとは何か正体がイマイチ理解できません。
あるサンプルアプリのコードを見ると下記のようなヘッダーの設定がありました。
通常POSTとして欲しい情報(例えばuser_id、text等)とは別になぜ下記のようなヘッダー情報を送る必要があるのでしょうか。
下記の例ではAuthorizationとX-Requested-Withという情報を送っているようですが、他にも必要な情報があったりするのでしょうか。
詳しい方、ご教示くださいませ。

export function post(url, payload) {
    return axios({
    	method: 'POST',
    	url: url,
    	data: payload,
    	headers: {
    		'Authorization': `Bearer ${Auth.state.api_token}`,
            'X-Requested-With': 'XMLHttpRequest'
    	}
    })
}

Comments

[wwbQzhMkhhgEmhU]

知りませんがhttpだからでは？

Answer 1

HTTP ヘッダは HTTP で送受信するデータの冒頭に書いてあるデータです（まんまですね）。
ブラウザ上にレンダリングはされないですがブラウザ、サーバ、経路上のプロキシとかが読んで様々な用途に使います。

例えば HTTP レスポンスのヘッダは curl -i https://teratail.com と -i オプションを付けて curl すると、いろいろ付いてるのが確認できると思います。

HTTP リクエストヘッダの Authorization フィールドは、（通常は）認証トークンをサーバに渡してて、サーバ側でこれを検証して受理したり 403 を返したりするのに使います。
X-Requested-With はちょっと分かんないです。

通常POSTとして欲しい情報(例えばuser_id、text等)とは別になぜ下記のようなヘッダー情報を送る必要があるのでしょうか。

POST するデータはリクエストボディに格納して送られます。
認証トークンも POST データの一部としてリクエストボディに書いてもいいじゃんとは思わなくもないですが、その方法だと GET でリクエストを受け付けるエンドポイントに認証をかけることができません。
POST も GET も認証トークンの送受信と検証は同じ方法でやったほうがコード的に簡潔で良く、ゆえにみんなリクエストヘッダに認証トークンを載せるんだろうと思います。

他にも必要な情報があったりするのでしょうか。

リクエストヘッダに何を書くべきかっていうのは

• サーバ側で使っているミドルウェア/フレームワークのデフォルト挙動
• その上に自前で書いたコードの挙動

といった要因で決まります。つまりAPIによって必要となるヘッダ情報はマチマチです。
さらにリクエストヘッダに実際に何が書かれるかは

• クライアント側で使っているライブラリの挙動

にもよるので、ビシッと一言で答えるのが難しい気がします。
もし何かうまくいっていないのであれば、具体的な状況やエラーメッセージなどあれば分かる人がいるかも知れません。

Comments

[supermaruetsu]

ありがとうございました。頂いた回答で、ピンポイントでモヤモヤしていた部分が理解できました！！