Access to XMLHttpRequest at ' ' from origin ' ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No

Access to XMLHttpRequest at ' ' from origin ' ' 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.

i am facing this issue while i am trying to host my project from vercel I got everything right in my settings.py file but got this error over and over while i tried to host my project from vercel . I am using

django 5.1.6 django-cors-headers: 4.6.0 djangorestframework: 3.15.2

i am also using react as my frontend framework. i also put this file as vercel.json in my backend directory but still got this error

{
“builds”: [
{
“src”: “backend/wsgi.py”,
“use”: “@vercel/python”,
“config”: { “maxLambdaSize”: “15mb” }
}
],
“routes”: [
{
“src”: “/(.*)”,
“dest”: “backend/wsgi.py”
}
]
}

this is my setting file please someone help me through this error

CORS_ALLOW_ALL_ORIGINS =True

ALLOWED_HOSTS = ["*"]
INSTALLED_APPS = [
    
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'api',
    'corsheaders',
    'rest_framework',
    'rest_framework_simplejwt',
]

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.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
   
]

I also ran into a similar issue with my Express.js API and my React.js client app. I use various AI tools to help me code and when building my vercel.json, it gave me a similar schema. The problem is that this format is actually a legacy schema for vercel.json files and they have moved to a different schema explained here. My best guess for your situation based on this documentation would be to change your vercel.json to this:

{
    "builds": [
        {
            "src": "backend/wsgi.py",
            "use": "@vercel/python",
            "config": {
                "maxLambdaSize": "15mb"
            }
        }
    ],
    "rewrites": [
        {
            "source": "/(.)",
            "destination": "backend/wsgi.py"
        }
    ],
    "headers": [
        {
            "source": "/(.)",
            "headers": [
                {
                    "key": "Access-Control-Allow-Credentials",
                    "value": "true"
                },
                {
                    "key": "Access-Control-Allow-Origin",
                    "value": "YOUR_VERCEL_FRONTEND_URL"
                },
                {
                    "key": "Access-Control-Allow-Methods",
                    "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT"
                },
                {
                    "key": "Access-Control-Allow-Headers",
                    "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, Authorization"
                }
            ]
        }
    ]
}

I am not sure if you were attempting to find a fix for the CORS issue by allowing all origins, or if you really did want to allow all origins, but I would highly recommend against that for security reasons. This solution ensures that only your client react app is the only origin that can communicate with your backend server.

Also be sure to update your settings.py to include these more secure changes:

# CORS_ALLOW_ALL_ORIGINS =True # Remove this

CORS_ALLOWED_ORIGINS = [
"http://localhost:3000", # React development server
"YOUR_VERCEL_FRONTEND_URL" # Your deployed frontend URL
]

CORS_ALLOW_CREDENTIALS = True

CORS_ALLOW_METHODS = [
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
]

CORS_ALLOW_HEADERS = [
'accept',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
]

# ALLOWED_HOSTS = ["*"] # Remove this

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'api',
    'corsheaders',
    'rest_framework',
    'rest_framework_simplejwt',
]

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.auth.middleware.SessionAuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
   
]

This should hopefully get you closer to having a successful deployment. Let me know how it goes!

Вернуться на верх