概要

最近のChromeのアップデートでレスポンスヘッダーの書き換えができるようになっていました。まだExperimentの段階ですが、Chrome v111以降で使うことができます。

動作確認用ページ

以下のページでCORS（Cross-Origin Resource Sharing）エラーのサンプルがあるため、これを利用します。

コンソールでエラーが確認できレスポンスヘッダーには Access-Control-Allow-Originが無いことがわかります。

ページとしても「Cannot load resource.」のエラー文言が表示されている状態です。

設定手順

設定のExperimentsから Local overides for response headersを有効にします。

Networkパネルから任意のファイルを選び、 Add header を選択しフィールド名と値を設定します。

初回の設定時には設定情報を保存するためにローカルの任意のフォルダを選択する必要があります。

今回はCORSを有効にするため、Access-Control-Allow-Originを *として設定しました。

なお、Sourcesパネルから.headersファイルを直接編集することでURIのルール設定をすることもできます。

設定後はXHR2として動作するようになったので、APIから返却された内容を表示することができました。

おわりに

これまでもSourcesパネルでレスポンスボディーの書き換えができましたが、レスポンスヘッダーの書き換えができるとCross-Origin Resource SharingやContent Security Policy周りのデバッグが捗りそうです。
わざわざCharlesを立ち上げる必要もなくなりますね。