開発者向け作業フロー

HTTP レスポンスヘッダーを確認する

CORS、キャッシュ、リダイレクト、Cookie、ブラウザ保護用のヘッダーを変更する前に、curl、ブラウザ DevTools、API クライアント、CDN ログからレスポンスヘッダーを取得して比較する手順です。

課題

HTTP ヘッダーは多くの本番障害の原因を説明しますが、コピーしたヘッダーブロックには Set-Cookie の重複、CDN の Cache-Control、プロキシの CORS、ホスティングのリダイレクト、フレームワークが追加した保護用ヘッダーが混ざります。本文やステータスコードだけを見ると、ブラウザ動作を決める設定を見落としやすくなります。

使う場面

  • CORS、credentials、preflight レスポンスヘッダーが原因でブラウザ要求が止まるときに使います。
  • デプロイ後も CDN やブラウザが古い内容を返し続けるときに適しています。
  • リダイレクト、API 要求、ログインコールバックが環境ごとに違って動くときに役立ちます。
  • curl、DevTools、API クライアント、本番ログのレスポンスヘッダーを同じ基準で比較したいときに使います。
  • ホスティングや CDN 設定で security、cache、cookie の変更をデプロイし、次の設定変更前に証拠が必要なときに使います。

手順

  1. 手順 1

    生のヘッダーを取得

    ブラウザ DevTools、`curl -I`、API クライアント、CDN ログ、サーバーログからレスポンスヘッダー全体をコピーします。可能ならステータス行も残します。

  2. 手順 2

    共有前に機密値を除く

    ヘッダーブロックをチケットやチャットに貼る前に、セッション Cookie、Bearer トークン、API key、ユーザー ID、内部ホスト名を削除します。

  3. 手順 3

    設定変更前に解析

    `HTTP Header Parser` に貼り付け、名前を正規化し、cache、CORS、content、security、request、response のグループに分けます。

  4. 手順 4

    重複ヘッダーを確認

    `set-cookie`、`vary`、`cache-control`、重複した `access-control-*` を確認します。正常な重複もありますが、意図しない重複はブラウザ挙動を分かりにくくします。

  5. 手順 5

    症状に沿って追跡

    古い内容なら cache ヘッダー、ブラウザでブロックされる要求なら CORS、ログイン失敗なら redirect、cookie、token 関連ヘッダーから比較します。

  6. 手順 6

    対象 URL と一緒に記録

    リダイレクトやコールバックの問題では `URL Parser` と `Query String Parser` で URL も確認し、解析したヘッダー要約をデバッグメモに残します。

HTTP レスポンスヘッダーを確認するの例

入力

HTTP/2 200
content-type: application/json; charset=utf-8
cache-control: public, max-age=3600
access-control-allow-origin: https://app.example.com
vary: origin, accept-encoding
strict-transport-security: max-age=31536000; includeSubDomains

出力

Start line: HTTP/2 200
Total headers: 5
Cache headers: cache-control, vary
CORS headers: access-control-allow-origin
Security headers: strict-transport-security

よくあるミス

レスポンス本文だけを見る

JSON 本文が正しく見えても、cache、CORS、cookie、security ヘッダーによりブラウザが応答を拒否したり再利用したりします。

ヘッダーの追加元を無視する

ヘッダーはアプリ、フレームワークミドルウェア、CDN、リバースプロキシ、ホスティング既定値から来ます。アプリを直す前に環境差を比べます。

すべての重複をバグ扱いする

`set-cookie` は複数回出るのが普通です。ヘッダー名とブラウザ挙動を確認せずに重複を削除しないでください。

最終リクエストだけ見て preflight を見落とす

CORS 問題は最終 API 応答ではなく OPTIONS preflight 応答で起きることがあります。ブラウザが cross-origin 要求を止める場合は両方を取得します。

Cookie やトークンをそのまま共有する

ヘッダーのスクリーンショットやログにはセッション Cookie、Bearer トークン、ユーザー識別子が入ることがあります。共有前に機密値をマスクします。

よくある質問

個人 Cookie やトークンを貼り付けてもよいですか?

共有用メモやスクリーンショットでは、セッション ID、トークン、API キー、ユーザー識別子を削除してください。ローカル解析でもコピーした出力は漏れる可能性があります。

レスポンスヘッダーで CORS エラーを説明できますか?

はい。CORS 失敗は `access-control-allow-origin`、credentials、methods、allowed headers、preflight 応答の組み合わせに左右されます。

curl とブラウザでヘッダーが違うのはなぜですか?

要求ヘッダー、Cookie、リダイレクト、プロトコル、キャッシュが違う可能性があります。正確な URL と要求条件をそろえて比較します。

キャッシュ問題ではどのヘッダーを先に見ますか?

`cache-control`、`etag`、`last-modified`、`age`、`vary`、CDN 関連ヘッダーを先に見ます。ブラウザキャッシュと CDN キャッシュで規則が違う場合があります。

ブラウザ保護用のヘッダーでは何を確認しますか?

コンテンツ読み込み、HTTPS 強制、iframe 埋め込み、参照元送信、ブラウザ機能の許可を制限するヘッダーが、画面表示や API フローを止めていないか確認します。

レスポンスヘッダーだけでなくリクエストヘッダーも必要ですか?

必要なことが多いです。CORS、cache、content negotiation、cookie、authorization の動作はリクエストヘッダーに依存するため、環境比較では対応する要求条件も取得します。