Django Rest Framework - Vue js - axios , i cant send session Cookie at DRF api

Question

i try to do a simple session authentication with "django.contrib.auth.urls". While i can login and i recieve a session id and csrf, the first time i login sends at request the cookie when i perform an axios get request, but when i try to login from another account does not send the cookie and i receive error code 401 when i perform a get requst with axios.(I work at development server). I mention also that every time i can do login succesfully and i receive session id and csrftoken but not include them at get request. Here is the settings.py:

"""
Django settings for inventoryapi project.

Generated by 'django-admin startproject' using Django 5.0.

For more information on this file, see
https://docs.djangoproject.com/en/5.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/5.0/ref/settings/
"""

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/5.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!


# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True




# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'rest_framework',
    'rest_framework.authtoken',

    'django_registration',
    'djoser',
    'widget_tweaks',
    'corsheaders',

    'users',
    'inventory'
]

MIDDLEWARE = [
    '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',
    'corsheaders.middleware.CorsMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
]

ROOT_URLCONF = 'inventoryapi.urls'
CORS_ALLOW_ALL_ORIGINS = True # If this is used then `CORS_ALLOWED_ORIGINS` will not have any effect
CORS_ALLOW_CREDENTIALS = True




TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR/"templates",],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

#WSGI_APPLICATION = 'inventoryapi.wsgi.application'


# Database
# https://docs.djangoproject.com/en/5.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/5.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/5.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/5.0/howto/static-files/

STATIC_URL = 'static/'

STATICFILES_DIRS = [
    BASE_DIR/"static"
]


AUTH_USER_MODEL = 'users.CustomUser' # We use custom user Model for authorization 

# Default primary key field type
# https://docs.djangoproject.com/en/5.0/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
LOGIN_URL = "/accounts/login" 
LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = "/"


# Django-REST-Framework

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.TokenAuthentication',
        'rest_framework.authentication.SessionAuthentication',
    ),
    'DEFAULT_PERMISSION_CLASSES': (
        'rest_framework.permissions.IsAuthenticated',
    )
}

Also i provide you the axios setup inside api.service.js file :

const axios = require("axios");
axios.defaults.withCredentials = true;
axios.defaults.xsrfCookieName = "csrftoken";
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
export { axios };

Also it is worth to mention i have create a custom user for authentication and the login page is a django Template. When i login succesfully redirects me to vue js app.

from django.contrib.auth.models import AbstractUser
class CustomUser(AbstractUser):
    pass

the vue.config.js is given:

module.exports = {
  publicPath:
    process.env.NODE_ENV === "production"
      ? "/static/dist/"
      : "http://127.0.0.1:8080",
  outputDir: "../static/dist",
  indexPath: "../../templates/index.html",
  pages: {
    index: {
      entry: "src/main.js",
      title: "Verify Inventory",
    },
  },
  devServer: {
    devMiddleware: {
      publicPath: "http://127.0.0.1:8080",
      writeToDisk: (filePath) => filePath.endsWith("index.html"),
    },
    hot: "only",
    headers: { "Access-Control-Allow-Origin": "*" },
  },
};

i use :
axios: "^1.6.5", "vue": 3.2.13, djangorestframework:3.14.0 Django:5.0

Thank you.

Rafael Guedes · Accepted Answer · 2024-01-30 14:48:37Z

Are you being able to make this request from Postman or cURL? The typical scenario is to make a request to the auth (with user and pass), then the endpoint providing you with the auth csrftoken. So you store the token at a session in the Browser, passing it as header (usually Authorization) as part of the following requests.

Are you sure you are refreshing the auth token every time an account logs in? If so, are you updating the browser storage so that you're not attempting to use the first one every time?

Posting your authentication method in Vue.js might help.

Oscar Gonzalez · Accepted Answer · 2024-01-30 15:32:59Z

When using Django Rest Framework (DRF), you don't necessarily have to stick with Django's default session cookie authentication. DRF offers Token-based authentication for APIs, providing more flexibility.

Unlike session cookies, Token authentication involves including a token in the Authorization header with each API request. This token serves as your authentication proof.

So, in DRF, you have the option to move away from the default cookie-based authentication and embrace the more versatile Token authentication for API interactions.

Collectives™ on Stack Overflow

Django Rest Framework - Vue js - axios , i cant send session Cookie at DRF api

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related