Доступ к XMLHttpRequest по адресу ' ' from origin ' ' заблокирован политикой CORS: Ответ на предполетный запрос не прошел проверку контроля доступа: Нет

Доступ к XMLHttpRequest по адресу ' ' from origin '' заблокирован политикой CORS: Ответ на предполетный запрос не прошел проверку контроля доступа: на запрошенном ресурсе отсутствует заголовок 'Access-Control-Allow-Origin'.

я столкнулся с этой проблемой, когда пытался разместить свой проект из vercelli, все было правильно в моем файле settings.py, но при попытке разместить свой проект из vercel я снова и снова получал эту ошибку. Я использую

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

я также использую react в качестве своего интерфейсного фреймворка. я также поместил этот файл как vercel.json в свой серверный каталог, но все равно получил эту ошибку

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

это мой файл настроек , пожалуйста, кто-нибудь, помогите мне устранить эту ошибку

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',
   
]

Я также столкнулся с аналогичной проблемой с моим Express.js API и моим React.js клиентским приложением. Я использую различные инструменты искусственного интеллекта, которые помогают мне в написании кода, и при создании моего vercel.json он дал мне похожую схему. Проблема в том, что этот формат на самом деле является устаревшей схемой для файлов vercel.json, и они перешли на другую схему, описанную здесь. Мое лучшее предположение для вашей ситуации, основанное на этой документации, - изменить ваш файл vercel.json на этот:

{
    "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"
                }
            ]
        }
    ]
}

Я не уверен, пытались ли вы найти решение проблемы CORS, разрешив все источники, или вы действительно хотели разрешить все источники, но я бы настоятельно не рекомендовал этого делать по соображениям безопасности. Это решение гарантирует, что только ваше клиентское приложение react является единственным источником, который может взаимодействовать с вашим внутренним сервером.

Также не забудьте обновить свой settings.py, чтобы включить эти более безопасные изменения:

# 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',
   
]

Надеюсь, это приблизит вас к успешному внедрению. Дайте мне знать, как все проходит!

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