Vue.js + axiosでLambdaのAPIを叩く方法

開発環境

  • Windows10
  • AWS Lambda
  • Vue.js

APIの作成

Lambda

九州の都道府県を返すサンプルです。
サーバーは別のサイト(オリジン)から送られてきたhttpリクエストをブロックすることができます。
CSR (Cross-site Request Forgery) などの対策のためです。
許可する場合はサンプルのようにレスポンスヘッダーでAccess-Control-Allow情報を返す必要があります。

Access-Control-Allow-Origin : 許可するオリジンを指定できます。上の例はワイルドカードですべてのオリジンからのリクエストを許可しています。
Access-Control-Allow-Headers : 許可するリクエストヘッダーを指定できます。上の例はワイルドカードですべてのリクエストヘッダーを許可しています。
Access-Control-Allow-Methods : 許可するリクエストメソッドを指定できます。上の例はGET,POST,OPTIONSを許可しています。
オリジンから別のオリジンにアクセス権を許可する仕組みをCORS(Cross-Origin Resource Sharing)といいます

OPTIONSについては後程説明します。

API Gatewayの設定

リソースの作成

image.png

GETおよびOPTIONSメソッドを作成

image.png
image.png
image.png

上の関数をAPI化しました。

OPTIONSメソッドとは

サーバーからクライアントに対してアクセス権を返します。
クライアントからサーバーに対してOPTIONSリクエストを送ることをPreflight requestといいます。

サンプルの例では
まず、クライアントがPreflight requestをサーバーに送る。
サーバーがOPTIONSレスポンス(アクセス権)を返す。
クライアントはアクセス権を確認し、アクセス可能であればGETメソッドリクエストを送る。
サーバー側はGETレスポンスを返す。
という流れになります。

AWSが用意しているのCORSを使用することもできるのですが、正しく動作させることができなかったため自作することにしました。

Preflight requestはブラウザが自動的に送信するためクライアントの実装では意識する必要はありません

APIキーの必要性の設定

image.png

※ OPTIONSはAPIキーの必要性をfalseのままにしておく

image.png

ブラウザがPreflight requestを送るときにリクエストヘッダを追加することができないため、falseにしておいてください。
GETメソッドにはAPIキーを設定することができます。

デプロイ

image.png

Vue

プロジェクトにaxiosをインストール

サンプルコード

APIにGETリクエストを送ってレスポンスをitemsに保存。Viewでitemsの中身を表示しています。
OPTIONSリクエストは自動で送信されるため記述は必要ありません。

確認

image.png

APIから情報を取得するのに成功しています。

参考にさせていただいたサイト

CORSのプリフライトリクエスト(OPTIONメソッド)はAPI Keyの認証なしでOKにしておかないと失敗する話 | フューチャー技術ブロ…

 

オリジン間リソース共有 (CORS) – HTTP | MDN

https://developer.mozilla.org