Fix: Cors Header added and allowed Origins specified

backend/all4trees/settings.py

@@ -40,6 +40,7 @@
     'django.contrib.staticfiles',
     'rest_framework',
     'rest_framework_simplejwt',
+    "corsheaders",
 ]
 
 MIDDLEWARE = [
@@ -50,6 +51,7 @@
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
+    'corsheaders.middleware.CorsMiddleware',
 ]
 
 ROOT_URLCONF = 'all4trees.urls'
@@ -101,6 +103,21 @@
     },
 ]
 
+CORS_ALLOWED_ORIGINS = [
+    "http://localhost:5173",
+]
+
+# Enable credentials (e.g., cookies) if needed
+CORS_ALLOW_CREDENTIALS = True
+
+CORS_ALLOW_METHODS = (
+    "GET",
+    "POST",
+    "PUT",
+    "PATCH",
+    "DELETE"
+)
+
 
 # Internationalization
 # https://docs.djangoproject.com/en/6.0/topics/i18n/

backend/requirements.txt

@@ -2,4 +2,5 @@ asgiref==3.8.1
 Django==4.2.2
 djangorestframework==3.16.0
 djangorestframework_simplejwt==5.5.1
+django-cors-headers==4.9.0
 docutils==0.22

backend/users/urls.py

@@ -1,15 +1,16 @@
 from django.urls import path
 from rest_framework import routers
-from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView
+from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView, TokenVerifyView
 from .views import UserViewSet, GroupViewSet
 
 router = routers.DefaultRouter()
 router.register(r"users", UserViewSet)
 router.register(r"groups", GroupViewSet)
 
 urlpatterns = [
-    path('token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
-    path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
+    path('auth/token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
+    path('auth/token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
+    path('auth/verify/', TokenVerifyView.as_view(), name='token_verify'),
 ]
 
 urlpatterns += router.urls

webapp/src/app/App.tsx

@@ -5,6 +5,7 @@ import "./styles/all4trees.css";
 import "./styles/globals.css";
 
 function App() {
+
   return (
     <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
       <AuthProvider>

webapp/src/app/api/client.ts

@@ -1,10 +1,38 @@
-const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000/graphql';
+const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000/api';
 
 export const fetchJsonFixture = async (name: string) => {
   const response = await fetch(`/src/fixtures/${name}.json`);
   return response.json();
 };
 
+export const fetchToken = async (username: string, password: string) => {
+  const res = await fetch(`${API_URL}/auth/token/`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ username, password }),
+  });
+  if (!res.ok) {
+    throw new Error(`Erreur de connexion: ${res.status} ${res.statusText}`);
+  }
+  const data = await res.json();
+  console.log('Token reçu:', data);
+  return data.access;
+};
+
+export const verifyToken = async (token: string) => {
+  const res = await fetch(`${API_URL}/auth/verify/`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ token }),
+  });
+  if (!res.ok) {
+    console.error(`Token invalide: ${res.status} ${res.statusText}`);
+    return false;
+  }
+  console.log('Token vérifié avec succès');
+  return true;
+};
+
 export const fetchGraphQLData = async () => {
   const res = await fetch(API_URL, {
     method: 'POST',