FlaskでCORSへの対応

CORS (Cross-Origin Resource Sharing, オリジン間リソース共有) とは、 ブラウザで実行されているフロントエンドの JavaScript コードがバックエンドと通信する時、そのバックエンドがフロントエンドとは異なるオリジンである場合、アクセスを許可するかどうかを決めるものです。

オリジンにはプロトコール、ドメイン、ポート番号が含まれています。

FlaskでCORSを有効にする

Flask-CORS という Flask の拡張機能が既にあります。

または、 after_request() デコレータを利用することで、すべてのリクエストを受信した後に、CORS 関連の設定が実行されます。

ワイルドカード”*“を指定して、すべてを許可することができますが、 リクエストが資格情報を含んでいる場合は、Access-Control-Allow-Originを*に指定するとブロックされますので、明示的にオリジンを指定するのがおすすめです。

from flask import request


@app.after_request
def after_request(response):
    allowed_origins = ['http://127.0.0.1:5000/', 'http://127.0.0.1:4000/']
    origin = request.headers.get('Origin')
    if origin in allowed_origins:
        response.headers.add('Access-Control-Allow-Origin', origin)
    response.headers.add('Access-Control-Allow-Headers', 'Content-Type')
    response.headers.add('Access-Control-Allow-Headers', 'Authorization')
    response.headers.add('Access-Control-Allow-Methods', 'GET, POST, OPTIONS')
    response.headers.add('Access-Control-Allow-Credentials', 'true')
    return response