先日、フロントをNext.js、バックエンドをDjango Rest Frameworkで構築した際に、CORSのエラーが発生しました。
簡単に解決できたので、その手順をまとめます。
CORSとは?
CORS(Cross-Origin Resource Sharing)は、異なるオリジン(ドメイン、スキーム、またはポート)間でリソースの共有を可能にするセキュリティ機能です。これは、ウェブブラウザがセキュリティの観点から同一オリジンポリシー(Same-Origin Policy)を適用し、異なるオリジン間でのリソースの読み込みを制限するために必要です。
CORS設定をする手順
Django Rest FrameworkでCORS設定をする手順は以下の通りです。
django-cors-headersをインストールする
pip install django-cors-headers
settings.pyを編集する
インストールしたらsettings.pyにdjango-cors-headersの設定を追加します。
MIDDLEWAREにcorsheaders.middleware.CorsMiddlewareを追加する際はdjango.middleware.common.CommonMiddlewareよりも前に書く必要があるので注意してください。
また、CORS_ALLOW_ALL_ORIGINSをTrueにすると全てのオリジンからのリクエストを許可します。
全て許可するとセキュリティ上のリスクがあるため、本番環境ではCORS_ORIGIN_WHITELISTを使って許可するオリジンを指定することをおすすめします。
INSTALLED_APPS = [
...
'corsheaders',
...
]
# CommonMiddlewareよりも前に書く
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
CORS_ALLOW_ALL_ORIGINS = True
or
CORS_ORIGIN_WHITELIST = [
"http://localhost:3000",
]
まとめ
Django Rest FrameworkでCORS設定をする手順をまとめました。
CORSエラーが発生した際は、django-cors-headersを使って設定を行うことで解決できるので、ぜひ参考にしてみてください。
コメント