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

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

 

f:id:shohu33:20170928164701j:plain

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.

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

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