Vue.js でGET、POST 通信する時の躓きポイント
フロント⇔サーバーの通信処理に疎いのもあり、
自分がしょっちゅう躓くので備忘として残しておくことに……
🖥やりたいデータ通信
- Vue.js で axios によるAPI通信をしたい
- AWS API Gateway から Lambda のfunctionを実行
- DynamoDBのデータを取得＆登録を行う
※⏩Lambda はPython3.6 にて説明しています
この構成で躓いた時に生じるエラーの内容が掴みづらく、
具体的に何処が悪いのかがわかりにくいエラーメッセージが出てくるので、
せめてそういう時に確認すべきポイントを押さえておきたいという意図の記事です。
ピタリとエラーを解決する記事ではありません。あくまで解消への一助を狙うものです。
☔️主なハマり理由
- Lambda 側でリクエストパラメータが取得できていない → なぜ🤔？
- API Gateway の設定があってるのかわからない😨
- request 送信時にエラーが出る → なぜ🤔？
- request する時のパラメータがあってるかわからない😨
🛰受付側で確認すること
1. ☢️AWS Lambda
🔍ログ(CloudWatch)で調べよう
- まず処理の末端にあたるLambda でデータがどの様に来ているか確認
-
Lambdaの処理をすぐにログに出力して引数の「event」をreturnしてしまう
def lambda_handler(event, context): print(event) return { "statusCode": 200, "body": json.dumps(event) } -
API通信を実行してログが出力されるか確認
-
ログにrequest パラメータが出力されていればLambda function 内での引き方に問題がありそう
-
key が正しいか、dict形式/list形式/ただのstring…型が想定通りか確認されたし
-
ログにパラメータが出力されていなければAPIGatewayの設定を確認すべし
2. ✡️API Gateway
📜ステージのデプロイ履歴を確認
- 設定していた内容でデプロイされてなかったとかあるので念の為チェック
- 万が一記憶と違う時間帯にデプロイされてたら再度デプロイし直してみるのも手
📚リソースのメソッドを確認
- Lambdaをコールしているメソッドの設定を確認します
- まず確認した方がいいのが統合リクエストの「マッピングテンプレート」
- 想定通りの設定になっているかを確認する
- この辺りの設定に慣れてない人はテンプレート定義は推奨を選ぶのが吉
- 「Content-Type」がデータ通信する種類とあっているか確認
- Lambda 側に出力されることを確認するために、テンプレートを「メソッドリクエストのパススルー」にするのも手
- パススルーのテンプレートでリクエストパラメータが含まれるかLambda functionのログを確認
- ログにリクエストパラメータらしきものが無かったらテンプレートのマッピングが上手くできていない可能性もあり
- 明らかに間違っていると判断つかない時は次のステップのCORS設定を確認すると良い
- 他にも、「リクエストメソッド」でクエリパラメータやヘッダーに必須条件の文字列を定義していないか確認する事
🛠リソースのCORS設定を確認
- APIのCORS設定が有効か確認
- CORSが有効になっていれば「OPTIONS」のメソッドが作成されているはず
- 万が一CORSを有効にした後に追加したメソッドがあれば、再度「CORSの有効化」をしてみる
- 設定を変更したらちゃんとデプロイしましょう（デプロイして変更内容が反映されるまで1~5min程のタイムラグあり）
- 設定を見直しても解決の兆しが見れない場合、潔く諦めて送信側の確認をするべし
📡送信側で確認すること
1. 🎛axiosのパラメータを確認
- 送信時にブラウザのconsoleでエラーが出ていれば見直す甲斐はあり
- axios の実行メソッドが正しいか確認（GET、POST、PUT、DELETE…）
axios(API_URL,{ method: '???' })
axios.???(API_URL, {params: params})
-
APIパス（URL）が正しいか確認
-
header とparamsの確認
-
以下の様な原因の所在が分かりにくいエラーメッセージもあるため一度header もparams も含まなくしてみる
Access to XMLHttpRequest at 'https://XXXXXXX.amazonaws.com/api?vv=example&nn=' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. -
エラーの内容が変わればheaderかparamsの設定が原因とみれる
-
params はリクエストに含められる文字列かを確認（'/'とか無いか）必要に応じて変換する
-
「Content-Type」が「application/json」の場合、上の様な文字はJSON。stringifyする必要あり
-
headerに複数設定がある場合、一つずつ足してって送信を試す（不要な情報の可能性があるため）
🌀それでも解決できない時は…
ガンバレ！！！ （自分もまだまだ未熟であります…
🎭vue.js ＋ axios でAPI通信する時は…
受け側のCORS周りの設定と、送信側のheader が肝な気がしてます。
いくつかAPI立てて開発してますが、いずれもその2点に関する設定が原因でハマってました…
ちなみにAWSの方では、Lambda側のエラーによりますが
ロールやアクセスコントロールの設定も正しいか確認する事も必要かもしれません。
(この場合ほとんどがLambda側でエラーになるはず)
API Gateway のマッピングテンプレートやAPI通信に関する知識を蓄えていきたい…
以上、躓いた時のチェックポイント備忘録でした。