はじめに
普段、主にフロントエンドを触っているのですが、繋がらなかったり、予想外の挙動をしたりと頻繁にパニクるので備忘録的にまとめます。
他にもこんなハマりポイントがあったよみたいな話お待ちしております
1. Missing Authentication Token...???
事象
認証なしに設定している、あるいはAuthenticationトークンをヘッダーに詰めていて適切にリクエストしているつもりなのに一生これが返ってくる
原因
APIのデプロイをしていませんでした。
初っ端からしょうもないミスで申し訳ないんですが、本当によくやるので。。
リソースに変更を加えたらデプロイをしましょう。
2. No 'Access-Control-Allow-Origin' header is present on the requested resource.
事象
通信に失敗して、インスペクタをみたら何やら赤文字で標題のようなメッセージが表示されている
原因
CORSの設定が適切ではなかった。
CORSは、Cross-Origin Resource Sharingの略です。
現在のブラウザでは、クロスサイトスクリプティングを防止するために、特定の条件の時を除き（単純リクエストと呼ばれます。参考:オリジン間リソース共有 (CORS))、プリフライトリクエストというものを実際のリクエスト前に行い、そのレスポンスに応じてHTMLを取得したサーバ以外からデータを取得することを拒否するようになっています。
なので、API Gatewayを使う場合CORSを有効化し、適切に設定してあげる必要があります。
つまり今回のメッセージは、許容されないヘッダーがリクエストに含まれており、エラーが発生したということを示しているということですね。
主なHTTPレスポンスヘッダーは下記のようになります。
| HTTPヘッダー名 | 説明 |
|---|---|
| Access-Control-Allow-Headers | 実際のリクエストで許容するヘッダーを指定する |
| Access-Control-Allow-Methods | 実際のリクエストで許容するHTTPメソッドを指定する |
| Access-Control-Allow-Origin | リクエストを許容するオリジンを指定する |
例えば、こんな感じ。
CORSの有効化を行った後でもOPTIONSメソッドの統合レスポンスにて設定できます。
設定したらデプロイしてね
3. エラーレスポンスがすベてCORSエラーになっている
事象
エラーが返ってきてるのはわかるんだけど、CORSで弾かれて詳細が全くわからない。。
原因
API Gatewayでは、統合レスポンスに何らかの原因で到達しなかった場合、ゲートウェイレスポンスというものを返却しますが、こちらのCORS設定が行われていませんでした。
こんな感じで、レスポンスヘッダーをよしなに設定してあげるとうまく行くかと思います
繋がって、ちゃんとエラーさえ返って来れば一安心です。
こちらにゲートウェイレスポンスの詳細が乗っています。
個人的には、エンドポイントの指定を間違えてAPI Configuration Errorが返ってくることとかよくありました。
ところで...
ステージの設定で、Cloud Watch Logsにログを出力することが可能です。
それでは、素敵なAPI Gatewayライフを！