✈️
Chromeに消されたCORS Preflight requestを確認する方法
Chromeにおける開発の小ネタです🍣
CORSが必要なWebアプリを開発中、以下のようにプリフライトでエラーとなったとします
リクエストとレスポンスがどんな感じで送られたか確認しようと思い詳細を開くものの、
実際に送信された（と思われる）OPTIONSメソッドがどうだったか…というよりざっくり失敗したということしか分からないようになっており、
開発者としてはもう少し具体的な情報がほしいところです😿
調べて見ると、Chrome一定バージョン以降表示されないのがデフォルトとなったようで、再度表示を有効化する方法も出てくるのですが、
この情報自体が数年前のものということもあり、どうやら現在のChromeではフラグ自体が削除されてしまっているようでした🪦
ということで、実際に送られた情報を正確に確認する手順をメモ✍
方法
実際にリクエストが発生したら、それがTimelineに残ってる状態でコンテキストメニューを開き、 Save all as HAR with content を選択します
HARファイルはHTTP Archiveファイルとのことで、HTTP通信中に乗った資格情報やペイロードが保存されているので注意しましょう
出力されたHARファイルをGoogle謹製のHAR Analyzerで読み込みます
Web上にアップロードすることが憚られるようならFiddlerなどを使うのもよいかもですね
タイムラインを探すと、ちゃんとOPTIONSのリクエストが送られていることがわかります
開発者ツール上では確認できなかった、レスポンスのステータスコードやOriginヘッダーの情報も正確な値が表示されていていい感じです🍌
そんだけ😌
Discussion