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

生徒

「FlaskでWebアプリを作っているんですが、CORSエラーって出てしまいました。これって何ですか？」

先生

「CORSは『コース』と読みますが、正式には『クロス・オリジン・リソース・シェアリング』といって、セキュリティのための仕組みなんですよ。」

生徒

「えっ、セキュリティの機能なんですか？じゃあ勝手に無効にしていいものではなさそうですね…」

先生

「その通りです。CORSをセキュアに設定することは、とても大切なんです。初心者向けにやさしく解説していきますね！」

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

CORSとは、Cross-Origin Resource Sharing（クロス・オリジン・リソース・シェアリング）の略で、あるWebサイトから別のWebサイトへデータを取りに行くときのルールです。

「オリジン」というのは、ドメイン（サイトの住所）とポート番号のこと。たとえば、

http://example.com
http://localhost:3000

これらは別のオリジンになります。違うオリジンからアクセスがあると、セキュリティのために自動でブロックされるのがCORSの仕組みです。

2. FlaskでCORSエラーが起きる例

例えば、Reactなどのフロントエンドと、Flaskのバックエンドを別々のサーバーで動かすと、次のようなエラーが出ることがあります。


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

これは、ブラウザが「ちょっとその通信は危ないかも」とブロックしている状態です。

3. Flask-CORS拡張を使ってCORSを有効にする

Flaskには、CORS設定を簡単にしてくれるFlask-CORSという拡張機能があります。これを使えば、初心者でも簡単に設定できます。

まずは、インストールします。


pip install flask-cors

次に、アプリにCORSを有効にするコードを書きます。


from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

このように書くと、すべてのドメインからのアクセスを許可してしまいます。開発中は便利ですが、本番では危険です。

4. 本番環境では特定のドメインだけ許可する

セキュリティを守るためには、特定の信頼できるドメインだけを許可しましょう。以下のように記述します。


from flask_cors import CORS

CORS(app, resources={r"/api/*": {"origins": "https://myfrontend.example.com"}})

この設定は、「/api/で始まるURL」だけに対して、「https://myfrontend.example.com」からのアクセスを許可します。

5. CORSの設定をさらに細かく制御する

CORSの設定では、以下のような細かい項目も指定できます。

methods：許可するHTTPメソッド（GETやPOSTなど）
headers：許可するHTTPヘッダー
supports_credentials：クッキーの送受信を許可するか

例として、POSTリクエストだけを許可したい場合は、以下のように書きます。


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

6. セキュリティの観点で絶対に避けたい設定

セキュリティのために、次のような設定は本番環境では絶対に避けてください。

origins="*"（すべてのドメインを許可）
supports_credentials=True なのに origins="*"

特に「クッキー」や「ログイン情報」をやり取りする場合、信頼できるドメインだけに限定することが大切です。

7. CORSの設定でありがちなミスと対処法

CORS設定でよくある間違いと、その解決方法をいくつか紹介します。

ミス1：CORS設定を忘れて、フロントエンドからアクセスできない
ミス2：サーバーは許可してるのに、クライアント側でcredentials: trueが原因で拒否される
ミス3：OPTIONSリクエストを処理していない（CORSのプリフライト）

これらは初心者がよくつまづくポイントなので、設定がうまくいかない場合は見直してみましょう。

8. セキュアなCORS設定のベストプラクティス

最後に、セキュリティの観点から見たCORS設定のベストプラクティスをまとめます。

必要なオリジンだけを指定する
開発中と本番で設定を切り替える
クレデンシャル情報（ログイン情報など）は細心の注意で扱う
プリフライトリクエスト（OPTIONS）にも正しく対応する

これらを意識することで、Flaskアプリを安全に運用することができます。

まとめ

FlaskアプリケーションにおけるCORS（クロスオリジン・リソース・シェアリング）の設定は、現代のWeb開発において非常に重要な位置を占めています。とくにフロントエンドとバックエンドを別々のサーバーで動かす構成が一般化している現在では、CORSの仕組みを正しく理解し、安全に設定することが求められます。この記事では、初心者でも理解しやすいように、CORSの基本、Flaskでの具体的な書き方、セキュリティの視点から避けるべき設定、そして安全な運用のためのベストプラクティスまで幅広く解説してきました。 CORSは一見すると面倒な制約のように感じるかもしれませんが、その本質は「悪意ある外部アクセスからデータを守るための安全装置」です。ブラウザが同じオリジン（同じドメイン・同じポート）でないアクセスを防ぐのは、ユーザーを守るための自然な仕組みであり、それを解除したり部分的に許可するには慎重な判断が必要です。Flaskでは「Flask-CORS」という拡張を使って簡単に設定できますが、便利である反面、設定の仕方を誤るとセキュリティリスクを生む可能性があるため、仕組みと用途を正しく理解することが重要です。とくに本番環境では、origins="*" のようにすべてを許可する設定は絶対に避けなければなりません。強い制限を設けずに無制限にアクセスを許すということは、自分の家のドアを開けっぱなしにしているような状態であり、外部からの不正なスクリプトによる攻撃のリスクを高めます。許可したいオリジンを丁寧に指定し、HTTPメソッドやヘッダー、認証情報（Credentials）の取り扱いまで細かく設定することで、より安全で信頼性の高いWebアプリケーションを構築できます。また、CORSエラーが発生したときには、サーバー側の設定だけでなく、フロントエンド側の挙動やプリフライト（OPTIONSリクエスト）への対応など多角的に確認する必要があります。問題が起きた際に「どこが原因なのか」を見つけやすくするためにも、今回紹介した設定ルールやミスしやすいポイントを覚えておくと便利です。実践に役立つサンプルコードを用意しましたので参考にしてください。

安全なCORS設定を行うサンプルコード


from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)

# 特定のオリジンだけ許可する安全な設定例
CORS(app, resources={
    r"/api/*": {
        "origins": "https://myfrontend.example.com",
        "methods": ["GET", "POST"],
        "supports_credentials": True
    }
})

@app.route("/api/data")
def api_data():
    return jsonify({"message": "セキュアなCORS設定が適用されています"})

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


# 開発環境では柔軟に許可し、本番で厳しく制御する例
from flask import Flask
from flask_cors import CORS
import os

app = Flask(__name__)

ENV = os.getenv("FLASK_ENV", "production")

if ENV == "development":
    # 開発中は柔軟にアクセスを許可
    CORS(app, resources={r"/api/*": {"origins": "*"}})
else:
    # 本番では特定のオリジンのみ許可
    CORS(app, resources={r"/api/*": {"origins": "https://myfrontend.example.com"}})

@app.route("/api/info")
def info():
    return {"status": "環境に応じたCORS設定が行われています"}

上記のコードのように、FlaskではCORSを環境に応じて切り替えたり、特定のパスだけに制限を設定したりと、意図に合わせて柔軟に調整できます。Webアプリが大規模化すると、複数のフロントエンドや複数のAPIサービスを扱うケースも増えていくため、このような柔軟なCORS設定は欠かせない技術のひとつです。初心者のうちから「どのオリジンを許可すべきか」「どんなヘッダーが必要なのか」「Credentialsを扱う場合に注意すべき点は何か」など、判断基準をしっかり身につけておくことで、将来的な開発スキルの向上につながります。また、CORSは単なる技術設定ではなく、セキュリティを守るための重要な防御ラインです。フロントエンドとバックエンドの通信が正しく安全に行われてこそ、ユーザーが安心して使えるアプリが完成します。今回学んだ知識は、他のWebフレームワークを扱う際にも応用が効く普遍的な考え方ですので、ぜひ繰り返し参考にして理解を深めてください。

先生と生徒の振り返り会話

生徒

「CORSエラーってただの邪魔なエラーだと思ってましたけど、ちゃんと意味のある安全機能だったんですね！」

先生

「そうなんです。むやみに無効化するのは危険ですし、正しく設定すれば安全な通信を実現できますよ。」

生徒

「本番でorigins="*"を使ってはいけない理由がよくわかりました。気をつけます！」

先生

「フロントエンドとの連携が増えるほどCORSの重要性も高まるので、今回の知識は必ず役に立ちますよ。」

生徒

「次からはプリフライトやヘッダーも意識して、安全な設定を心がけます！」