PythonのAPI開発でCORS設定を完全解説！初心者でもわかるクロスオリジン対策

1. CORS（クロスオリジン）とは？

1. CORS（クロスオリジン）とは？

CORSとは「クロスオリジンリソースシェアリング」の略で、異なるURL間の通信を制御する仕組みです。 例えば「http://localhost:3000」から「http://localhost:8000」のAPIにアクセスする場合、 異なる場所（オリジン）とみなされます。

ブラウザはセキュリティのために、勝手に他のサーバーへアクセスすることを制限しています。 この制限を解除するためにCORS設定が必要になります。

2. なぜCORS設定が必要なのか？

2. なぜCORS設定が必要なのか？

CORSを設定しないと、フロントエンド（HTMLやJavaScript）からAPIにアクセスしたときにエラーになります。 特にReactやVueなどのフロントエンドとPython APIを組み合わせる場合は必須です。

簡単に例えると「知らない人からの電話は出ない」という状態です。 CORSは「この人からのアクセスはOK」と許可する設定になります。

3. FlaskでCORSを設定する方法

3. FlaskでCORSを設定する方法

Pythonの人気フレームワークFlaskでは、「flask-cors」というライブラリを使って簡単に設定できます。

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/api")
def hello():
    return {"message": "Hello API"}

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

このコードでは、すべてのアクセスを許可しています。初心者はまずこれで動作確認を行いましょう。

4. 特定のURLだけ許可するCORS設定

4. 特定のURLだけ許可するCORS設定

セキュリティを高めるために、特定のURLだけ許可することができます。

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)

CORS(app, resources={r"/api/*": {"origins": "http://localhost:3000"}})

@app.route("/api/data")
def data():
    return {"data": "sample"}

この設定では「http://localhost:3000」からのアクセスだけ許可されます。

5. FastAPIでCORSを設定する方法

5. FastAPIでCORSを設定する方法

FastAPIでも同様にCORS設定が可能です。こちらは標準機能で対応できます。

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "http://localhost:3000"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_methods=["*"],
    allow_headers=["*"],
)

@app.get("/")
def read_root():
    return {"message": "Hello FastAPI"}

allow_originsで許可するURLを指定します。「*」を指定すると全て許可になります。

6. CORSエラーの確認方法

6. CORSエラーの確認方法

CORSエラーはブラウザの開発者ツールで確認できます。 ChromeならF12キーを押して「Console」を見てください。

Access to fetch has been blocked by CORS policy

このエラーが出た場合は、CORS設定が正しくできていない可能性があります。

7. よくあるミスと注意点

7. よくあるミスと注意点

初心者がよくやるミスとして、URLの書き間違いやポート番号の違いがあります。 また、本番環境で「*」を使うのは危険なので注意が必要です。

セキュリティを考えると、必要なURLだけを許可するのが基本です。

8. シンプルな動作確認コード

8. シンプルな動作確認コード

最後に、初心者でも試せる簡単なAPIとCORS設定の例を紹介します。

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/")
def index():
    return {"message": "CORS OK"}

app.run(debug=True)

このコードを実行すれば、ブラウザから問題なくアクセスできるようになります。

まとめ

まとめ

CORS設定の基本と重要性の振り返り

PythonのAPI開発においてCORS設定は、フロントエンドとバックエンドを安全に連携させるために欠かせない重要な技術です。 特にFlaskやFastAPIを使ったAPI開発では、ブラウザのセキュリティ制約によってクロスオリジン通信が制限されるため、 正しくCORSを設定しないと「APIにアクセスできない」「データ取得が失敗する」といった問題が発生します。

本記事では、CORSとは何かという基本概念から、なぜ必要なのか、そしてFlaskやFastAPIでの具体的な設定方法までを丁寧に解説しました。 クロスオリジンという考え方は、異なるドメイン・ポート・プロトコルの組み合わせで判断されるため、 ローカル開発環境でも頻繁に発生する問題です。

FlaskとFastAPIでのCORS設定ポイント

Flaskではflask-corsライブラリを利用することで簡単にCORS設定を追加でき、 FastAPIでは標準のミドルウェアとしてCORS設定が提供されています。 初心者の方はまず全てのアクセスを許可する設定で動作確認を行い、 その後に特定のオリジンのみ許可する設定へと段階的に進めるのがおすすめです。

allow_originsやresourcesの設定を適切に行うことで、 セキュリティを維持しながら安全にAPI公開が可能になります。 特に本番環境ではワイルドカード指定を避け、 必要最小限のアクセス制御を行うことが重要です。

CORSエラーの原因と解決方法

CORSエラーはブラウザの開発者ツールで簡単に確認でき、 「blocked by CORS policy」というメッセージが表示された場合は設定ミスが疑われます。 主な原因としては、オリジンの指定ミス、ポート番号の違い、HTTPとHTTPSの不一致などがあります。

これらの問題を解決するには、アクセス元のURLを正確に把握し、 API側で許可するオリジンを正しく設定することがポイントです。 また、開発環境と本番環境で設定を切り替えることも実務では非常に重要です。

実務で役立つベストプラクティス

Python API開発におけるCORS設定のベストプラクティスとして、 以下のポイントを意識することが重要です。

• 開発環境では柔軟に、本番環境では厳密に制御する
• 特定のオリジンのみを許可する設定を基本とする
• 不要なHTTPメソッドやヘッダーは許可しない
• エラー発生時はブラウザのコンソールで原因を特定する

これらを意識することで、安全で信頼性の高いAPIを構築することができます。

サンプルコードで最終確認

最後に、FlaskとFastAPIでのCORS設定をまとめた実用的なサンプルコードを確認しておきましょう。 実際の開発現場でもそのまま応用できる構成になっています。

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)

CORS(app, resources={r"/api/*": {"origins": "http://localhost:3000"}})

@app.route("/api/test")
def test():
    return {"message": "CORS設定OK"}

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

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "http://localhost:3000"
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_methods=["GET", "POST"],
    allow_headers=["*"],
)

@app.get("/api/test")
def test():
    return {"message": "FastAPI CORS OK"}

上記のコードをベースに、自分の開発環境や本番環境に合わせて設定を調整することで、 安全かつスムーズなAPI連携が実現できます。