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

生徒

「Flaskを使ってWebアプリを作ったんですが、他のサイトからアクセスしようとしたらエラーが出ました…」

先生

「それは『CORS（コース）』という仕組みが関係しています。FlaskでCORS設定をすれば解決できますよ。」

生徒

「CORSって難しそうですが、初心者でもできますか？」

先生

「もちろんです！CORSはWebアプリでとても大事なセキュリティの仕組みなので、初心者向けにやさしく説明しますね。」

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

CORS（コース）は「Cross-Origin Resource Sharing（クロスオリジン・リソース・シェアリング）」の略で、別の場所（別のURLやドメイン）からデータを取りに行くことを制限する仕組みです。

たとえば、ある人が「https://example.com」というサイトを作っていて、その中で「http://localhost:5000」のFlaskサーバーにアクセスしたいとします。これが『オリジン（出どころ）が違う』という状態で、「クロスオリジン」と呼ばれます。

セキュリティ上、このような異なるオリジンからのアクセスは、ブラウザが自動でブロックしてしまいます。これを許可するには、Flask側で「CORS対応」の設定が必要です。

2. なぜCORS対応が必要なの？

最近のWebアプリでは、フロントエンド（見た目）とバックエンド（処理部分）を別々のサーバーで作ることがよくあります。

たとえば、HTMLやJavaScriptの画面部分は「ポート3000」、Flaskは「ポート5000」で動かすといったように、違うアドレスになります。

このような場合、CORS設定をしておかないと、画面からFlaskへのデータのやりとりがブロックされ、エラーになります。

「自分のアプリ同士」でもオリジンが違えばCORSエラーになります。

3. FlaskでCORSを設定するには？

FlaskでCORS対応するには、Flask-CORSという便利な拡張機能を使います。

このライブラリを使えば、Flaskのアプリに対して簡単にCORS設定ができるようになります。

まずはインストールしてみましょう。


pip install flask flask-cors

4. Flask-CORSの基本的な使い方

以下は、FlaskでCORSを有効にする最も基本的な方法です。すべてのオリジン（出どころ）を許可するパターンです。


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対応済みです！"})

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

CORS(app)と書くだけで、Flask全体のAPIにCORSを適用できます。

5. CORSのセキュリティ設定も忘れずに！

全てのサイトにアクセス許可を出すのはとても危険です。安全に使うには、特定のオリジンだけを許可しましょう。

たとえば、http://localhost:3000からだけアクセスを許可したい場合は、次のように書きます。


from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins=["http://localhost:3000"])

@app.route('/data')
def get_data():
    return jsonify({"message": "特定のオリジンからのアクセスだけ許可しています。"})

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

originsで指定したURLだけが許可され、それ以外はアクセスできません。

6. HTTPメソッドやヘッダーを細かく設定するには？

さらに細かく、どんな操作（GET、POSTなど）を許可するかも設定できます。

以下は、GETとPOSTだけを許可する例です。


from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={r"/data": {"origins": "http://localhost:3000", "methods": ["GET", "POST"]}})

@app.route('/data', methods=["GET", "POST"])
def get_data():
    return jsonify({"message": "GETとPOSTだけ許可しています"})

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

7. CORSエラーが出るときのよくある原因

オリジンが間違っている：「http」と「https」、ポート番号、ドメイン名が正しいか確認しましょう。
ブラウザのキャッシュ：設定を変えたのに反映されないときは、ブラウザのキャッシュをクリアしてみてください。
アクセス先のURL：/dataなど、リクエストのパスが正しいかどうかを確認しましょう。

8. そもそも「オリジン」って何？

「オリジン」とは、アクセス元のプロトコル（httpかhttps）、ドメイン名、ポート番号を組み合わせたものです。

たとえば：

http://localhost:5000
https://example.com
http://127.0.0.1:3000

これらはそれぞれ別のオリジンとみなされます。1文字でも違えば別扱いになるので注意しましょう。

9. Flaskで安全なCORS対応を実装しよう

FlaskでWebアプリを開発する際に、CORS設定は必須になります。とくに外部サイトや他のサーバーからアクセスする場合は、最初にしっかり対応しておくことが大切です。

Flask-CORSを使えば設定はとても簡単ですし、セキュリティを高める工夫も可能です。

プログラミング初心者でも、上記の例を参考にしながら、安全で使いやすいCORS対応を実現しましょう！

まとめ

Flaskで学んだCORS対応の総整理

FlaskでCORS（クロスオリジン）対応を行う場面は、現代のWebアプリ開発ではとても多くあります。特にフロントエンドとバックエンドを分けて開発する方法が一般的になり、JavaScript側とFlask側の通信が別のオリジンになるケースが当たり前になりました。そのとき、ユーザーの安全を守るためにブラウザが自動でブロックする仕組みがCORSであり、これを正しく設定することで初めてスムーズなデータ通信が行えるようになります。

今回の記事では、なぜCORSが必要なのか、FlaskでどのようにCORSを設定するのかを順番に確認してきました。特にフロントとバックを別サーバーで動かすときに発生するエラーの原因が、ただ設定をしていないだけというケースは非常に多くあります。初心者の方でも、Flask-CORSという拡張機能を使えば、アプリ全体にCORS設定を簡単に追加できるので、覚えておくと非常に便利です。

そしてもうひとつ大切なポイントが、CORS対応は「セキュリティ設定」であり、何でもかんでも許可していいものではないという点です。実際の開発現場では、許可するオリジンを限定し、さらに「許可するメソッド（GETやPOSTなど）」「許可するヘッダー」「許可するパス」を細かく設定することが欠かせません。とくに公開APIを作るときには、必要以上に広い許可を出してしまうと悪用される危険があります。

一方で、学習中の環境では、まずはすべてのオリジンを許可して動作を確認し、動作が理解できてきたら段階的に制限していく方法もよく使われます。このように、目的と状況に合わせて設定を調整するのがCORS対応の大切なポイントです。

振り返りとしてまとめ用サンプルコード

ここでは、実際に安全なCORS対応を実装するための復習用コードをまとめておきます。特定のオリジンを許可し、メソッドも制限した例です。


from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)

CORS(app, resources={
    r"/api/*": {
        "origins": ["http://localhost:3000"],
        "methods": ["GET", "POST"],
        "allow_headers": ["Content-Type"]
    }
})

@app.route('/api/info', methods=["GET"])
def info():
    return jsonify({"message": "安全にCORS設定されたAPIです。"})

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

実際にこのように細かく設定することで、不要なアクセスを遮断しつつ、必要な通信だけを許可できます。とくに複数のページからAPIを呼び出すような構成の場合、どのエンドポイントがどのオリジンから呼ばれるのかをきちんと把握しておくことが重要です。

また、初心者の方によくあるつまずきとして「設定を変えたのにエラーが消えない」というケースがありますが、多くの場合はブラウザのキャッシュが原因です。CORSはプリフライト通信も関係してくるため、一度キャッシュが残ってしまうと、新しい設定が反映されるまで時間がかかってしまうことがあります。そのため、設定を変えた際にはリロードではなく「キャッシュクリア＋強制再読み込み」を試すことが大切です。

CORSという仕組みは名前だけ聞くと難しそうですが、今回の流れを一通り理解すれば、Webアプリ開発において非常に重要な基礎が身についたと言えます。とくにAPIを扱う開発では避けて通れない技術となっているため、Flaskとあわせて身につけておけば必ず役に立ちます。

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

生徒

「CORSって難しそうだと思ってましたけど、仕組みが分かると意外とシンプルなんですね！」

先生

「そうですね。目的は『安全に通信させること』なので、仕組みを理解すれば必要以上に怖がる必要はありませんよ。」

生徒

「特定のオリジンだけ許可する設定とか、メソッドを制限するっていう発想は知りませんでした。」

先生

「実際のアプリではそこがとても大事になってきます。許可を広げすぎると危険なので、必要な範囲にしぼることがポイントです。」

生徒

「これで、フロントアプリとFlaskのAPIを別々にしても使えるようになりますね！」