Mjeld Technologies

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

「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行が追加されていました。

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