DRF+Axios: некоторые запросы не выполняются с `ERR_NETWORK` или `ERR_BLOCKED_BY_CLIENT`.

Это не вопрос, скорее ответ на эту распространенную проблему.

У меня есть Dashboard, построенный с помощью NextJs и Django+DRF, и я использую axios в качестве HTTP клиента.

я заметил, что некоторые из моих requests проходят, а некоторые нет (в основном запросы, которые извлекают, например, ежемесячные/годовые платежи/расходы компании).

Ниже вы найдете решение этой проблемы.

Решения, которые могут устранить эту проблему:

  • Установите CORS правильно на вашем сервере django settings.py:
    # CSRF
    # Either Update Axios settings or Django Settings
    CSRF_COOKIE_NAME = 'XSRF-TOKEN'
    CSRF_HEADER_NAME = 'HTTP_X_XSRF_TOKEN'

    # CORS
    CORS_ALLOW_ALL_ORIGINS = True # Do not run your production server with this setting
    CORS_ALLOW_CREDENTIALS = True

    from corsheaders.defaults import default_headers
    CORS_ALLOW_HEADERS = list(default_headers) + [
        'x-xsrf-token',
        'access-control-allow-headers', # this one is important
    ]

    CSRF_TRUSTED_ORIGINS = [
        'http://localhost:8000',
        'http://localhost:3000'
    ]

    CORS_ORIGIN_WHITELIST = [
        'http://localhost:8000',
        'http://localhost:3000',
    ]
  • Если вы используете Ublock Origin или любое расширение браузера такого рода, отключите его для 127.0.0.1 и localhost
    • .
  • Для Brave browser отключите экран для 127.0.0.1 и localhost
    • .
  • Вот и все, надеюсь, это поможет.

я решил подобную проблему в Django (не DRF), она воспроизводится при попытке развернуть django+gunicorn+nginx в compose.

Но я использую https://pypi.org/project/django-cors-headers/

#settings.py просто добавьте:

INSTALLED_APPS = [
    'corsheaders',

]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
]

CORS_ALLOWED_ORIGINS = [
#and add your site address with ports
    "http://127.0.0.1:8001",
    "http://localhost:8001",
]
Вернуться на верх