Flask CORS

この説明では、Flask アプリで API を作成するときに発生する問題と、別のドメインから Flask アプリにアクセスする際のエラーを修正する方法について学習します。

Flask で CORS クラスを使用してクロスオリジンの問題を修正する

API を作成することもありますが、これをユーザーに提供することに問題はありませんが、フロントエンドと統合するときに、この問題が発生します。これは、解決する必要のあるクロスオリジンリクエストです。

フロントエンド（通常はフロントエンドの開発者レポート）から報告された問題を解決する方法について説明します。これは、最初に Flask で API を作成するときに、この CORS を解決するために実行される手順を確認しないためです。クロスオリジンリソースシェアリングを表す問題。

最初のステップでは、Flask-Cors と呼ばれる組み込みモジュールをインストールする必要があります。このモジュールがインストールされたら、アプリケーションでこれを使用します。

pip install Flask-Cors

次に、CORS をインポートする必要があります。このモジュールは、すべてのタイプの CORS 問題を担当します。フロントエンドからのリクエストを解決できるようになります。

from flask_cors import CORS

次に、Flask アプリケーションを作成し、そのアプリを CORS クラスにラップして、このアプリがリクエストを受け入れるようにする必要があります。ルート上の直接のリクエストまたはその他のリクエストである可能性があります。

from flask import Flask, Response
from json import dumps
from flask_cors import CORS

app = Flask(__name__)
CORS(app)


@app.route("/", methods=["GET"])
def User_Access():
    return Response(dumps({"User_KEY": "ADB11081"}), mimetype="text/json")


app.run(port=5000)

アプリでこれを使用する方法はいくつかあります。最も簡単な方法は、アプリ全体を CORS() クラスでラップすることです。前の例では、その方法を確認しました。

次に、アクセスを許可するドメインと、アプリで特定のものを許可するものを定義できます。

cors という変数を作成してから、いくつかのオプションを渡します。最初のオプションはアプリ自体になり、2 番目のオプションは resources になります。これは、アクセスを許可する対象を指定できるキーワード引数です。

正規表現を使用しており、引用符の中にルートを配置し、スラッシュの後に特定のユーザーを指定するか、すべてのユーザーにアクセスを許可するためにアスタリスク記号を渡すことができます。

その後、アクセスを許可するドメインを定義するため、origins と入力する必要があります。次に、アクセスが許可されているオリジンまたはドメインのリストを提供できます。

この例では、すべての API ルートにアクセスできるインターネット上の任意のドメインにアスタリスク記号を渡します。

from flask import Flask, Response
from json import dumps
from flask_cors import CORS

app = Flask(__name__)


cors = CORS(app, resources={r"/*": {"origins": "*"}})


@app.route("/", methods=["GET"])
def User_Access():
    return Response(dumps({"User_KEY": "ADB11081"}), mimetype="text/json")


app.run(port=5000)

次に、サーバーを実行し、ブラウザーに移動して、開発者モードで何が起こっているかを確認します。Access-Control-Allow-Origin がすべてのドメインで許可されていることがわかります。