DRF/React CORS issue when trying to submit login authentication [SOLVED]

Question

I am getting this error while working on my DRF/React website. The problem started after trying to make a register/login screen after which I noticed that I started to receive CORS related issues. I have already imported 'corsheaders' and have modified my settings.py file in my django backend and have checked my API endpoints. The complete error looks as follows:

Access to XMLHttpRequest at 'http://localhost:8000/api/login/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute. :8000/api/login/:1

Failed to load resource: net::ERR_FAILED
Login.jsx:23 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data')
at handleLoginSubmit (Login.jsx:23:1)

For this website I wanted to use django's built in "sessionid" and use cookies on the frontend to keep track of my authenticated status.

As of right now I have tested my backend in the django REST Api view and received the following on the various POST requests:

POST /api/login/
HTTP 200 OK
Allow: POST, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "user": {
        "id": 1,
        "username": "admin",
        "email": "[email protected]"
    },
    "session_id": "o46sf4yerfcd5ndyeadf6e4vln6skt50"
}

In response my browser Applications/Cookies tab displayed the following:

sessionid   o46sf4yerfcd5ndyeadf6e4vln6skt50    localhost   /   2023-12-13T19:59:27.222Z    41  ✓       Lax     Medium  

csrftoken   zC7JqkYI79BZIOzLgp6RrDJndQw935fF    localhost   /   2024-11-27T19:59:27.222Z    41          Lax     Medium

Yet when I try to login through my client side I just get the above mentioned console log aswell as this backend response:

[29/Nov/2023 21:03:48] "OPTIONS /api/login/ HTTP/1.1" 200 0

---

This is my code as of now which I've been stuck on for some time:

//backend/backend/settings.py
ALLOWED_HOSTS = []


# Application definition

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

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    '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',
]

SESSION_ENGINE = 'django.contrib.sessions.backends.db'
SESSION_COOKIE_NAME = 'sessionid'

CORS_ALLOWED_CREDENTIALS = True
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
]

//backend/travel/views.py
class LoginView(APIView):
    permission_classes = [permissions.AllowAny]
    def post(self, request):
        data = request.data
        username = data.get("username", "")
        password = data.get("password", "")
        user = User.objects.filter(username=username).first()
        
        if user and user.check_password(password):
            serializer = UserSerializer(user)
            login(request, user)
            print(request.user)
            print("Session ID: ", request.session.session_key)
            
            response_data = {
                "user": serializer.data,
                "session_id": request.session.session_key,
            }
            return Response(response_data, status=status.HTTP_200_OK)
        return Response({}, status=status.HTTP_400_BAD_REQUEST)

//frontend/src/components/Login.jsx
const Login = () => {
    const [loginData, setLoginData] = useState({ username: "", password: "" });
    const [registerData, setRegisterData] = useState({ username: "", email: "", password: "" });
    const [isLoginView, setIsLoginView] = useState(true);
    const navigate = useNavigate();

    const handleLoginSubmit = async (event) => {
        event.preventDefault();

        try {
            const response = await api.post("login/", loginData);
            console.log("Login successful:", response.data);
            sessionStorage.setItem("session_id", response.data.session_id);
            navigate("/");
        } catch (error) {
            console.log("Login failed:", error.response.data);
        }
    };

//frontend/src/Api.jsx
import axios from 'axios';

axios.defaults.xsrfCookieName = 'csrftoken';
axios.defaults.xsrfHeaderName = 'X-CSRFToken';
axios.defaults.withCredentials = true;

export const api = axios.create({
    baseURL: 'http://localhost:8000/api/',
});