Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response. Flask & Angular

angularからflaskにAPIアクセスすると上記のようなヘッダー

Failed to load http://localhost:5000/hoge/: Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

のようなエラーが発生しました。

理由としてはflask側で OPTIONSのレスポンス時に

Access-Control-Allow-Headers

を返却していないためでした。

flask-cors(1.8)というライブラリ使っていたんですが

API Docs — Flask-Cors 3.0.3 documentation

を見ると、allow_headersとか、expose_headersとか記載があったんですが、バージョン違うようで(githubのタグ見ると1.8しかない、かつ、pipで入れると1.8なんですけどね、、、) どうもこれらオプションが使えないと。

なんで、

github.com

のソースをおっておくと、オプションが headersというのがありました。

これを、flask生成時に以下のように指定してあげると

CORS(app, headers='Content-Type')

無事、

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

のエラーが発生しなくなりました。

これはハマりぽいんだな。