Flask×フロントエンドのCORS対応を学ぼう！初心者でもわかる安全な設定方法

Flask×フロントのCORS対応を学ぼう！セキュアな設定方法

先生と生徒の会話形式で理解しよう

生徒

「先生、Flaskで作ったAPIをフロントエンドのHTMLやJavaScriptから呼び出そうとしたら、『CORSエラー』って出て通信できないんですけど、どうすればいいんですか？」

先生

「それは“クロスオリジン通信”に関するエラーですね。ブラウザが安全のために、別のドメインやポート番号からの通信を制限しているんです。Flaskでも設定を変えれば解決できますよ。」

生徒

「クロスオリジンってなんですか？難しそうです…。」

先生

「大丈夫、ゆっくり説明していきますね。CORSの仕組みとFlaskでの設定方法を順番に学んでいきましょう！」

1. CORSとは？初心者にもわかるクロスオリジンの意味

CORS（コース）とは「Cross-Origin Resource Sharing（クロス・オリジン・リソース・シェアリング）」の略で、異なるオリジン（つまりドメイン・プロトコル・ポート）間でのデータのやり取りを制御する仕組みです。

例えば、次のような場合は「オリジンが違う」と判断されます。

http://localhost:5000（Flaskサーバー）
http://127.0.0.1:3000（フロントエンド開発環境）

ブラウザはセキュリティ上の理由で、別のオリジンからAPIを呼び出すときに制限をかけます。これがCORSエラーの正体です。つまり「安全のために通信をブロックしている」ということなんです。

この制限を正しく緩めて、安全に通信できるようにするのが「CORS対応」です。

2. CORSエラーが起きる例を見てみよう

FlaskでAPIを作り、別のHTMLファイルからJavaScriptで呼び出すと、次のようなエラーが出ることがあります。


Access to fetch at 'http://localhost:5000/data' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy

これは「CORSポリシー（CORSの規則）」によって通信がブロックされたという意味です。ブラウザがサーバーに「このサイトからアクセスしてもいい？」と事前に問い合わせをしますが、Flask側がそれを許可していないため、通信が止められてしまいます。

3. FlaskでCORSを有効にするには？

Flaskでは、Flask-CORSという拡張機能を使えば簡単にCORSを有効化できます。まずはインストールしましょう。


pip install flask-cors

次に、Flaskアプリに組み込みます。


from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # これで全てのオリジンからのアクセスを許可

@app.route('/data')
def get_data():
    return jsonify({"message": "CORS対応済みAPIです！"})

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

このようにCORS(app)を1行書くだけで、他のドメインやポートからのアクセスができるようになります。これでフロントエンドのJavaScriptからAPIを呼び出してもエラーになりません。

4. JavaScriptでFlask APIを呼び出してみよう

次のようにフロントエンドからFetch APIを使ってFlaskのデータを取得してみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Flask CORSテスト</title>
</head>
<body class="container p-4">
    <h2>Flask CORS通信テスト</h2>
    <button id="btn" class="btn btn-primary">データ取得</button>
    <p id="result" class="mt-3"></p>

    <script>
        document.getElementById("btn").addEventListener("click", async () => {
            const res = await fetch("http://localhost:5000/data");
            const data = await res.json();
            document.getElementById("result").textContent = data.message;
        });
    </script>
</body>
</html>

ボタンを押すと、Flaskから「CORS対応済みAPIです！」というメッセージが表示されます。これでFlaskとフロントエンドのCORS通信が成功です。

5. セキュアなCORS設定をしよう（安全対策）

しかし、CORS(app)だけでは「すべてのオリジンを許可する」設定になるため、安全ではありません。本番環境では、許可するオリジンを限定する必要があります。


CORS(app, resources={r"/*": {"origins": ["https://example.com", "https://myapp.com"]}})

このようにして、特定のサイト（例：自分のWebアプリ）からのアクセスだけを許可できます。

さらに、CORS設定には次のようなオプションもあります。

supports_credentials=True：クッキー（ログイン情報）を含める場合に必要
methods：許可するHTTPメソッド（GET、POSTなど）を制限
max_age：ブラウザがCORS情報をキャッシュする時間


CORS(app, resources={
    r"/api/*": {
        "origins": ["https://myfrontend.com"],
        "methods": ["GET", "POST"],
        "supports_credentials": True
    }
})

このように細かく設定することで、不要なアクセスを防ぎ、安全にCORSを使うことができます。