ApiGateway + Lambda + Vue.js(axios)でCORS設定が強敵だった話

久しぶりに長時間ハマりました。同じ方がいそうな気がしたので記録します。

ちょっと正解かどうかはまだ未調査ですが、これで動作したというご報告。

シチュエーション

いたってシンプルで、Vue.jsのaxiosからApiGatewayのLambdaをGET/POSTするだけの実装でした。数年前にもすでにやっていたので楽勝と思いきや、preflightリクエストが成功しない、、、

そうそうプロキシ統合ありの場合になります。

巷の検索記事では解決できず

検索してでてくるのは

1.ApiGatewayでCORS有効にしてOPTIONSをつける

2.Lambdaのレスポンスの記述

headers: {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "GET"
        },

3.OPTIONSを自動生成でなく自前でつくる

これを試行錯誤して試したのですが日曜日まるっとやって、全くできず

途方にくれてましたが。

ようやく解決方法がみつかりました。

結論

方向性は間違っていなかったのですが、2はとくにやらず、3で解決しました。

ポイントはpreflight用にOPTIONSのlambdaを別途用意し、Access-Control-Allow-Headersをワイルドカードにするでした。

理想は制限したかったのですが、巷の設定どれをいれても動作せず、こちらでようやく動作するようになりました。

もし同じ悩みで全く動作していないバックエンド初段のかたの役立つ情報となれば幸いです。