Djangoのcorsエラーを解決したい
解決したいこと
Djangoのcorsエラーを解決したい
発生している問題・エラー
Access to fetch at 'https:〜' from origin 'https:〜' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
該当するソースコード
# settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'corsheaders',
'todo',
]
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_ALLOWED_ORIGINS = [
"http:〜", # フロントエンド(Next.js)のURL
]
詳細
フロントエンドはnext.jsで、バックエンドはDjangoを使用しています。
バックエンドをherokuにデプロイした段階で、ローカル(フロント)から
リクエストを送った時はうまくいっていました。
フロントエンドをvercelにデプロイした後で、
フロントからバックエンドにリクエストを送ると前述のエラーが出ます。
djangoのsettings.pyに設定するURLはvercelにデプロイした後のURLを設定しており、
スペルミスもないです。