ReactとFlaskの組み合わせにおけるCORSの重要性と設定方法

はじめに

近年、フロントエンドとバックエンドの分離が一般的な開発パターンとなっています。このような構成では、Reactのようなフロントエンドフレームワークを使ってUIを構築し、Flaskのような軽量なバックエンドフレームワークをAPIサーバーとして使用することがよくあります。しかし、このようなアーキテクチャを採用する際、Cross-Origin Resource Sharing（CORS）に関する理解と適切な設定が大切で、本記事がその備忘録です。

CORSとは？

CORSは、ウェブページが異なるオリジン（ドメイン、プロトコル、ポート）のリソースにアクセスすることをブラウザが許可するようにするセキュリティ機能です。デフォルトでは、ブラウザは同一オリジンポリシーを強制し、異なるオリジン間のリソース共有を制限します。しかし、実際のアプリケーションでは、フロントエンドとバックエンドが異なるオリジンに存在することがよくあります。このとき、CORSポリシーの設定が必要となります。

FlaskにおけるCORS設定

FlaskでAPIを構築し、Reactアプリケーションからのアクセスを許可するには、flask-corsライブラリを使用するのが一般的です。以下は基本的な設定例です：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # すべてのオリジンからのアクセスを許可

@app.route('/')
def hello():
    return 'Hello, CORS!'

if __name__ == '__main__':
    app.run(debug=True)

上記のコードでは、CORS(app)によって全てのオリジンからのアクセスを許可しています。実際のプロジェクトでは、セキュリティを考慮して特定のオリジンのみを許可するように設定することをお勧めします。

さらに細かい設定

flask-corsを使用して特定のオリジンを許可する場合、CORS関数のoriginsパラメータに許可したいオリジンのリストを指定することで、特定のオリジンからのリクエストのみを許可することができます。これにより、アプリケーションのセキュリティを向上させることができます。

以下に、flask-corsを使用して特定のオリジンを許可する方法の例を示します。

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)

# 特定のオリジンだけを許可する
cors = CORS(app, resources={r"/*": {"origins": ["http://example.com", "https://example2.com"]}})

@app.route("/")
def hello():
    return "Hello, World!"

if __name__ == "__main__":
    app.run(debug=True)

この例では、resourcesパラメータを使用して、どのルートに対してどのオリジンを許可するかを詳細に指定しています。r"/*"はすべてのルートを指す正規表現で、"origins"キーに許可するオリジンのリストを指定しています。この設定により、http://example.com と https://example2.com からのリクエストのみが許可され、他のオリジンからのリクエストはブロックされます。

より細かい制御が必要な場合

flask-corsは、さらに細かい制御が必要な場合にも対応しています。例えば、特定のHTTPメソッドのみを許可したり、ヘッダーやクレデンシャルの扱いをカスタマイズしたりすることが可能です。以下のように設定を追加することができます。

cors = CORS(app, resources={
    r"/api/*": {
        "origins": ["http://example.com", "https://example2.com"],
        "methods": ["GET", "POST"],  # 許可するHTTPメソッド
        "allow_headers": ["Content-Type", "Authorization"],  # 許可するヘッダー
        "supports_credentials": True  # クレデンシャルをサポートするか
    }
})

ReactからFlaskへのアクセス

ReactからFlaskのAPIにアクセスする際は、fetchやaxiosなどのHTTPクライアントを使用します。CORSポリシーによってリクエストがブロックされないようにするためには、Flask側で適切なCORS設定がされている必要があります。

fetch('http://localhost:5000/')
    .then(response => response.text())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

まとめ

ReactとFlaskを組み合わせた開発では、異なるオリジン間でのリソース共有を可能にするためにCORSの設定が不可欠です。flask-corsを利用することで、簡単にCORSの設定を行うことができ、安全かつ効率的なフロントエンドとバックエンド間の通信を実現することが可能です。