DockerでPython×Django×Vue.jsの環境を構築する(CORS認証編)

こんにちは、竹村です！ELDEN RINGが日本ゲーム大賞で大賞を獲得しましたね！自分はずっとDLCが出るのを心待ちにしています。。。

さて、前回「DockerでPython×Django×Vue.jsの環境を構築する(サーバー起動編)」で、フロントエンドとバックエンドのサーバー起動までの設定周りについて書きました。

今回は、2つのサーバー間の通信を行うために必要なCORS（Cross-Origin Resource Sharing：オリジン間リソース共有）設定について触れていきたいと思います。

なお、フォルダやアプリ構成については前回の記事DockerでPython×Django×Vue.jsの環境を構築する(サーバー起動編)を参照してください。

CORSとは

CORS（Cross-Origin Resource Sharing：オリジン間リソース共有）とは、異なるオリジン（プロトコル＋ホスト＋ポート）の間で通信を許可し、リソースを共有する事です。
詳しくは割愛しますが、以下の記事がとても良くまとまっていました！

https://zenn.dev/riko/articles/cors_deepen_understanding

django-cors-headers

DjangoでCORSを扱う為に、django-cors-headersをインストールします。
requirements.txtに以下を記載し、Dockerコンテナを立ち上げます。

django-cors-headers==3.11.0

setting.py

settings.pyを編集していきます。

INSTALLED_APPSとMIDDLEWAREに、以下を追記します。

INSTALLED_APPS = [
　　・・・　
    'corsheaders',
]

MIDDLEWARE = [
　　・・・
    'corsheaders.middleware.CorsMiddleware',
]

次に以下を追記しましょう。

CORS_ALLOWED_ORIGINS = [
    'http://localhost:8080',
    'http://127.0.0.1:8080',
]

CORS_ALLOW_CREDENTIALS = True

CORS_ALLOWED_ORIGINSは、通信を許可する対象のIPとポートを記載します。
今回、フロントエンド側で使用するポートは8080ですので（前回記事のdocker-compose.ymlを参照）、
‘http://localhost:8080’と記載しています。

CORS_ALLOW_CREDENTIALSは、Trueに設定する事でCookie をクロスオリジンの HTTP リクエストに含めることができます。詳しくはdjango-cors-headersのドキュメントをご覧ください。

PyPI

django-cors-headers django-cors-headers is a Django application for handling the server headers required for Cross-Origin Resource Sharing (CORS).

終わりに

Docker環境でふたつの異なるサーバーを立ち上げて構築するにあたって、最初につまずいたのがCORS認証でした。
setting.pyに記載する環境変数については情報が古くなる可能性もあるので、公式ドキュメントを参照する事を推奨します。

この記事が、同じような境遇の方の一助となれば幸いです。

ではまたお会いしましょう！