Django Rest Framework CORS filtering HTTPS requests

I have a deployed React App in vercel, and Django Rest API in pythonanywhere to serve as backend. I have configured CORS correctly as it follows:

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

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    '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 = [
        "https://wallet-ten-theta.vercel-app/",
]

In my React app I make a call as it follows:

const getCategories = async (user) => {
        try {
            await axios
                .get(
                    `https://xxxxxx.pythonanywhere.com/categories/${user}`,
                    {}
                )
                .then((response) => {
                    setCategories(response.data);
                });
        } catch (error) {
            console.log(error);
        }
    };

But even though I configured everything correctly, I get a as 'been blocked by CORS policy' error. When, in local development, I replace HTTPS by HTTP in CORS_ALLOWED_ORIGINS = ["http://localhost:3000",] and in the api call (http://xxxxxx.pythonanywhere.com/categories/${user}`), everything works fine.

But as Vercel hosting works with HTTPS, I get a Mixed Content error. I can't understand why I can't allow HTTPS requests.