>Develop>Python>【Django】CORS policyでのエラー

【Django】CORS policyでのエラー

CORS policyでのエラー

Next.js と Django で開発をしていて、ローカルの開発環境内で Next.js側から Django のAPI にアクセスすると、Django側ではリクエストが来ていることは確認できるのだが、Next.js側で下記のエラーが出力され、fetchできない。

Access to fetch at 'http://localhost:8000/api/test/' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Access-Control-Allow-Origin ヘッダーがリクエスト側にないので、CORSポリシーによりブロックされているとのこと。

CORSとは

CORS は Cross-Origin Resource Sharing の略。Origin はスキーム（http://）とFQDN（example.co.jp）とポート（8000）を合わせたもの（http://www.example.co.jp:8000）で、CORS は直訳すると異なる Origin へのリソース共有のことで、悪意のあるあアクセスを防ぐため、設定せずにAPIを取りに行くと今回のようなエラーが出る。詰まり、別の Origin にあるサーバーのAPIを取得する際には、APIサーバー側でアクセスを許可する Origin 設定しておく必要がある。

詳しくはオリジン間リソース共有 (CORS)を参考に。

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

Django で CORSヘッダーを扱えるようにする django-cors-headers というパッケージをインストール。

$ pip install django-cors-headers

Django の settings.py で django-cors-headers の設定する。CORS_ALLOWED_ORIGINS で許可する Origin（今回はローカル環境で開発している Next.js: http://localhost:3000 からのアクセスを許可）を設定すれば問題なく、アクセスできるようになる。

# アプリケーション
INSTALLED_APPS = [
    ・
    ・
    ・
    'corsheaders',
    ・
    ・
    ・
]

# ミドルウェア
MIDDLEWARE = [
    ・
    ・
    ・
    'corsheaders.middleware.CorsMiddleware',
    ・
    ・
    ・
]

# 許可する Origin
CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000'
]

因みに、すべての Origin からのアクセスを許可する場合は、 下記のように記述すればよい。

CORS_ALLOW_ALL_ORIGINS = True

Django

記事を読んでいただきありがとうございました。

Page Top