【TIPS】CORSインストールでDjango(DRF)とReactを連携する方法まとめ

エンジニアライフスタイルブログを運営しているミウラ(@miumiu06171)です。

普段はフリーランスでシステムエンジニアをしております。

今回は、こちらの記事に続いてPythonのDjango RestFrameworkでバックエンド側のAPIサーバを開発した後にCORSというパッケージを用いてフロントエンドのReactと連携する設定方法を紹介します。

APIサーバを開発するためにVisual Studio Code (VS Code) を使用しているため、同様に確認したい方は、こちらの記事でVS CodeでPythonの開発環境を構築してみてください。

CORS(Cross-Origin Resource Sharing)とは

CORSとは、異なるサーバ間でリソースを共有する仕組みのことです。

今回、Djangoで作成するAPIサーバとReactのフロントサーバ間でリソースを共有するためにCORSの設定方法をみていきます。

共有するリソースは、DjangoのAPIサーバがレスポンスとして返すJSONデータを指します。

CORSインストール(django-cors-headers)

CORSを導入するためには、以下のpipコマンドでdjango-cors-headersをインストールします。

pip install django-cors-headers

1	pip install django-cors-headers

Djangoのsettings.pyでCORS設定

CORSがインストールできたら、Djangoのsettings.pyにCORSの設定を加えていきます。

INSTALLED_APPS変数の編集

まずは、settins.pyのINSTALLED_APPS変数に以下の「’corsheaders’」を追加しましょう。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'rest_framework',
    'corsheaders',
    'app.apps.AppConfig',
]

INSTALLED_APPS = [

'django.contrib.admin',

'django.contrib.auth',

'django.contrib.contenttypes',

'django.contrib.sessions',

'django.contrib.messages',

'django.contrib.staticfiles',

'rest_framework',

'corsheaders',

'app.apps.AppConfig',

]

MIDDLEWARE変数の編集

次は、同じsettings.py内のMIDDLEWARE変数に以下の「’corsheaders.middleware.CorsMiddleware’」を追加します。

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

MIDDLEWARE = [

'corsheaders.middleware.CorsMiddleware',

'django.middleware.security.SecurityMiddleware',

'django.contrib.sessions.middleware.SessionMiddleware',

'django.middleware.common.CommonMiddleware',

'django.middleware.csrf.CsrfViewMiddleware',

'django.contrib.auth.middleware.AuthenticationMiddleware',

'django.contrib.messages.middleware.MessageMiddleware',

'django.middleware.clickjacking.XFrameOptionsMiddleware',

]

CORS_ORIGIN_WHITELIST変数の追加

最後は、同じsettings.py内に以下のCORS_ORIGIN_WHITELIST変数を追加します。

CORS_ORIGIN_WHITELIST = [
     'http://127.0.0.1:3000'
]

CORS_ORIGIN_WHITELIST = [

'http://127.0.0.1:3000'

]

ローカルホストの3000番ポートがReactのフロントサーバになるので、上記の設定でReactからDjango RestFrameworkのAPIサーバへのアクセスができるようになります。

まとめ

いかがでしたでしょうか。

CORSでDjango RestFrameworkとReactを連携するために設定方法を解説してきました。

フロントサーバがAngular等に変わった場合、ポート番号が変わるだけで書き方は同様になりますので、React以外をお使いの方にも参考にして頂ければと思います。

【TIPS】Django Rest Framework(DRF)のテスト方法解説[GitHubソース公開中]

【TIPS】GitHubにあるDjangoおよびDRFの開発環境を再現する方法[Windows版]

#Django #DRF #Webアプリ #エンジニア #フリーランス #ブログ #プログラミング #ライフスタイル #入門 Python 初心者