DjangoでCORSエラーを解決！ フロントエンド開発をスムーズにする設定ガイド

フロントエンド開発でDjangoバックエンドと連携する際、CORS（Cross-Origin Resource Sharing）エラーに遭遇するのはよくあることです。「CORSポリシーによってブロックされました」というメッセージが表示されたら、この記事が解決策となります。

なぜCORSが重要なのか？Django開発者向けのCORS入門

CORSは、異なるオリジン（ドメイン、プロトコル、ポート）からのリクエストを制限するブラウザのセキュリティ機能です。悪意のあるサイトがあなたのデータを盗むのを防ぐために存在します。

• あなたのフロントエンド（例：http://localhost:3000）
• あなたのDjangoバックエンド（例：http://localhost:8000）

これらが異なるオリジンとして認識され、CORSエラーが発生するのです。

DjangoでCORSを有効にするための簡単なステップ

DjangoでCORSを有効にすることで、開発がスムーズに進み、異なるオリジン間での安全なデータ交換が可能になります。以下の手順で設定を行いましょう。

1. django-cors-headersをインストール

ターミナルで以下のコマンドを実行します。

pip install django-cors-headers

2. INSTALLED_APPSに追加

settings.pyを開き、INSTALLED_APPSセクションに'corsheaders'を追加します。

INSTALLED_APPS = [
    ...
    'corsheaders',
]

3. ミドルウェアを追加

settings.pyのMIDDLEWAREセクションに、以下のミドルウェアをリストの一番上に追加します。

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

重要： corsheaders.middleware.CorsMiddlewareは必ずリストの先頭に配置してください。

4. 許可するオリジンを設定

settings.pyに、許可するオリジンをリストとして追加します。

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

フロントエンドが使用するURL（HTTPS、ポート番号を含む）を正確に指定してください。

役立つオプション設定

プロジェクトによっては、以下の設定も必要になる場合があります。

全てのオリジンを許可（本番環境では非推奨）

開発環境でのテスト目的なら、以下の設定で全てのオリジンからのアクセスを許可できます。

CORS_ALLOW_ALL_ORIGINS = True

注意： セキュリティリスクがあるため、本番環境では使用しないでください。

クレデンシャル（Cookie、認証情報）を許可

認証情報（Cookie、トークン）をフロントエンドから送信する場合は、以下の設定も必要です。

CORS_ALLOW_CREDENTIALS = True

CORS_ALLOW_ALL_ORIGINSとCORS_ALLOW_CREDENTIALSを同時に使用することはできません。

カスタムヘッダーを許可

カスタムヘッダー（例：X-Auth-Token）を送信する場合は、CORS_ALLOW_HEADERSを設定します。

CORS_ALLOW_HEADERS = [
    "content-type",
    "authorization",
    "x-auth-token",
    ...
]

設定ファイルの例

以下は、settings.pyにおけるCORS設定の例です。

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

CORS_ALLOW_CREDENTIALS = True

よくあるCORSエラーとその解決策

CORSが全く機能しない場合

以下の点を確認してください。

• corsheaders.middleware.CorsMiddlewareがMIDDLEWAREリストの先頭にあるか。
• フロントエンドのオリジン（ポートとプロトコルを含む）が正確に一致しているか。
• 設定変更後にサーバーを再起動したか。

Preflightリクエスト（OPTIONSメソッド）が失敗する場合

ブラウザは、実際のリクエストを送信する前にOPTIONSリクエストを送信して、サーバーが許可するかどうかを確認します。 DjangoがOPTIONSメソッドを許可していることを確認してください。通常、特別な設定は不要です。

Django Rest Frameworkを使用している場合

django-cors-headersは、Django Rest Frameworkとも互換性があります。インストールとミドルウェアの設定が正しく行われていることを確認してください。

CORSに関するよくある質問

• 複数のフロントエンドURLを許可できますか？

  はい、CORS_ALLOWED_ORIGINSリストに複数のURLを追加できます。

CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "https://myfrontend.com",
]

• CORSはローカル開発にのみ影響しますか？

  いいえ、CORSは本番環境にも適用されます。フロントエンドとバックエンドが異なるオリジンにある場合は、必ずCORSを設定する必要があります。

• すべてのオリジンを許可するのは安全ですか？

  いいえ、開発中に一時的に使用するのは構いませんが、本番環境では信頼できるドメインのみにアクセスを制限する必要があります。

• フロントエンドで何か変更する必要がありますか？

  Cookieなどの認証情報を送信する場合は、fetchやAxiosリクエストでcredentials: "include"を設定する必要があります。

さらに学ぶ

• django-cors-headers GitHubページ: 詳細なドキュメント

CORSは最初は難しく感じるかもしれませんが、一度理解すれば、DjangoでのWebアプリ開発における小さな設定項目となります。このガイドを参考に、CORSエラーを解決し、スムーズな開発体験を実現してください。