Amazon API Gateway CORS の有効化

API Gateway CORS有効

Amazon API Gateway がブラウザコンソール画面から[リソース|アクション]「CORS の有効化」画面内[CORS を有効にして既存の CORS ヘッダーを置換]ボタンをクリックすることでCORS有効化されます。然しメソッドの実行設定でLambdaを指定しLambda プロキシ統合の使用」チェックしてしまうと「CORS の有効化」が機能しなくなるようです。これはLambda側にヘッダーの制御が渡ったということだと、私は解釈しています。従って、Lambda側でコード内にHTTPヘッダーを書きCORSを有効にする記述をすればCORSとして利用できます。

「Lambda プロキシ統合の使用」をOFFにした場合HTTPヘッダーを確認すると「access-control-allow-origin: *」がついていました。
「Lambda プロキシ統合の使用」をOFFにした場合HTTPヘッダーを確認すると「access-control-allow-origin: *」がついていました。

Lambda プロキシ統合の使用」をONにした場合、access-control-allow-originが消えてしまいブラウザからAjaxなどでAPIのデータが取得できなくなります。API Gatewayの「Lambda プロキシ統合の使用」をONにした場合はLambda側で下記のように記述します。

exports.handler = async (event) => {
    // TODO implement
    const response = {
        headers: {
            "Access-Control-Allow-Origin" : "*", 
            "Access-Control-Allow-Credentials" : true
        }, 
        statusCode: 200,
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

headersというエレメントを追加し“Access-Control-Allow-Origin”“Access-Control-Allow-Credentials”を追加します。ヘッダーを確認すると下記のように2行が追加されていました。

Lambda側でCORS HTTPヘッダーを追加
Lambda側でCORS HTTPヘッダーを追加

上記の処理を行いHTTPヘッダーに上記文字列の確認ができれば、Ajaxなどからデータ取得できます。