はじめに
CORSエラーなどが解消せず、
リクエスト/レスポンス情報を見たい経験はありませんか？
対応方法やエラー発生時の切り分けをまとめた備忘になります。
直面した問題
静的ホスティングしているS3からAPIGateway経由でLambdaを呼び出そうとした時に、
CORS関連のエラーが発生
CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
結論
APIGatewayでCORS設定に必要な設定項目が不足していたためエラーが発生
確認方法
ブラウザ開発者ツールによるリクエスト確認
- F12を押下してブラウザに備わっている開発者ツールを表示
- Networkを選択すると各リクエスト情報など通信ログが表示される
- CORSエラーが発生している通信を選択
各タブの情報は以下の通りであり、レスポンス情報が取得できていないことがわかる。
この情報だけでは「S3」-「APIGateway」-「Lambda」いずれの間に問題があるのか不明。
Headers：ブラウザがサーバーに送信した情報（Request URL, Request Headers）とサーバーがブラウザに返信した情報（Response Headers）とステータスコードを確認できます。
Payload：Request URLに含まれるパラメータを読みやすい形で確認できます。「view decoded」をクリックすることでURLエンコードされた内容も読める形で表示することができます
Preview：通信が返してきたリソースの画像などを確認できます。
Response：サーバーがブラウザに返したHTMLやJSファイルの内容やAPIのレスポンス情報など
Initiator：この通信を発生させる元となった他のリクエストとコード、この通信が元で発生した別のリクエストを確認できます。
Timing：通信が発生・終了したタイミングとその間に何に時間が使われたのかを確認できます。各タイミングの意味はこちらを参照。
APIGateway-Lambda間の通信確認
- AWSコンソール上APIGatewayトップページより「リソース」を選択
- 通信を確認したいメソッドを選択し、「テスト」タブを選択
- 「クエリ文字列」「ヘッダー」「リクエスト本文」を入力
ここではS3からAPIGateway経由でLambdaにリクエストを行うための情報を入力。
入力内容はS3側の静的ページに記載のheaderとbody情報でよい
- テスト実施
この実施結果が想定通りのため、「APIGateway」-「Lambad」間に問題がないことがわかる。
エラー情報のまとめ
開発者ツールのリクエストから「CORS」関連のエラーが確認でき、
「S3」-「APIGateway」間に問題があることがわかった。
「APIGateway」「CORS」等で検索すると、APIGateway側でCORS設定の有効化が必要であるとわかる。
従って以下のような簡易的なCORS許可の設定を行う。
上記設定を加えることで、リクエストの成功を確認。
また、console.log(data);のような記述をhtmlファイルに記載することで、
開発者ツールのconsoleより変数や処理の中身を確認することができる
最後に
同様にエラー切り分け方法で悩んでいる人の助けになれば幸いです。
参考先