🚦

Flask CORS 簡単紹介!

2022/08/09に公開

こんばんは〜 チェリニャンです🍒😽!

CORSの簡単紹介

今回はCORSについて話をしてみようと思います。
CORSは「Cross Origin Resource Sharing」です。
日本語では「オリジン間リソース共有」と言います。
簡単に言うと、ドメインまたはポートが他の外部サーバーのリソースを要求することです。

SOPとは?

SOPは「Same-Origin Policy」です。
一般的に外部サーバーからの要請を防ぎます。
例えば、ハッカーが外部からのアクセスを試みた時、外部サーバーのリソースを確認して、クライアントではなく悪意的な要請を防止することができます!

でもSOPは必要な要請も一旦防ぐので、外部サーバーのリソースを要求する時はCORSが必要なのです。
使用するサーバーのドメインを事前に許可しないと、データを簡単にやり取りすることができません!
誇張して表現するとこんな感じ? 笑

flask-CORS設定方法

私は今回の開発で、VueとReactのウェブサーバーとFlaskのdbサーバーを使っているし、複数のポートを使っていますので、CORSを必ず設定しなければなりませんでした。

FlaskでCORSを簡単に設定するflask_corsを簡単に紹介したいと思います。

flask-cors 設置

flask-cors 設置

CORS許可

CORSを通じてFlaskインスタンスで作られたappをアクセス許可処理します。
この場合はすべてのドメインに対してCORSを許可するようになります。
すべてのドメインに対してCORS許可

特定ドメインのみ許可

上記のように全てのドメインに対してCORSを許可したらセキュリティが弱くなります。
特定ドメインやポートのみ許可したら必要なドメインやポートのみ許可できるようになります。
特定ドメインやポートのみ許可

cors = CORS(app, resources={r'/hoge/*': {'origins': 'https://zenn.dev:5000'}})

このように設定をすると、下位アドレスとして /hoge だけ許可するし、ポートは5000だけ許可する意味になります。

cors = CORS(app, resources={r'/hoge/*': {'origins': ['https://zenn.dev:5000', 'https://google.com']}})

このように配列形式で書くと、複数のアドレスも設定できます。

参考サイト

参考サイトは下記になります。
https://flask-cors.readthedocs.io/en/latest/
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

今日の記事は以上になります!有難うございました ☺️ ☕️

Discussion