I'm developing a Django backend for data manipulation (appending and deleting records) and everything works correctly with Postman. However, when I call the /bookings/remove/ endpoint from my React Native app, I consistently receive a 403 Forbidden error with the message Forbidden (CSRF token missing.).

I’ve confirmed that other endpoints operate normally, so this issue seems confined to this specific endpoint. Here’s a breakdown of my setup and what I’ve tried so far.

-- Django Backend Setup --

My settings include:

PYTHONCopied
INSTALLED_APPS = [
    'corsheaders',
    "all other apps"
]

SESSION_COOKIE_SECURE = False
SESSION_COOKIE_SAMESITE = None
SESSION_COOKIE_AGE = 1209600

CORS_ALLOW_ALL_ORIGINS = True

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.security.SecurityMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ],
    'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination',
    'PAGE_SIZE': 10,
}

The endpoint causing issues is defined as follows:

PYTHONCopied
@api_view(["POST"])
@permission_classes([IsAuthenticated])
@csrf_exempt
def cancel_the_booking(request, booking_id):
    try:
        if not booking_id:
            return Response({"error": "Booking ID is required"}, status=status.HTTP_400_BAD_REQUEST)

        booking = Booking.objects.get(booking_id=booking_id)
        if booking.host_id != request.user.id:
            return Response({"error": "You are not authorized to cancel this booking", "host": request.user.id}, status=status.HTTP_403_FORBIDDEN)

        for date_price in booking.dates_price.all():
            AdSpaceDates.objects.create(
                ad_space=booking.space_id,
                available_from=date_price.available_from,
                available_to=date_price.available_to,
                price=date_price.price
            )

        booking.delete()

        return Response({"success": "Booking cancelled and dates are now available again"}, status=status.HTTP_200_OK)
    except Booking.DoesNotExist:
        return Response({"error": "Booking does not exist"}, status=status.HTTP_404_NOT_FOUND)
    except Exception as e:
        return Response({"error": str(e)}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)

The URL routing in my Booking app’s urls.py is:

PYTHONCopied
path('remove/<int:booking_id>/', cancel_the_booking , name="cancel_the_booking")

And in my project’s urls.py:

PYTHONCopied
path("bookings/", include("Bookings.urls")),

For CSRF token retrieval, I have:

PYTHONCopied
@api_view(["GET"])
@ensure_csrf_cookie
def get_csrf_token(request):
    csrf_token = get_token(request)
    return JsonResponse({'csrfToken': csrf_token})

path('api/get-csrf-token/', get_csrf_token, name='get_csrf_token'),

-- React Native Code --

Below is the relevant part of my React Native implementation:

JAVASCRIPTCopied
const getCsrfToken = async () => {
    try {
        const response = await Api.get('/api/get-csrf-token/');
        return response.data.csrfToken;
    } catch (error) {
        console.error('Error fetching CSRF token', error);
        return null;
    }
};

const handleConfirmButton = (booking) => {
    Alert.alert(
        'Cancel Booking',
        'Are you sure you want to cancel this booking?',
        [
            {
                text: 'No',
                onPress: () => console.log('Cancel Pressed'),
                style: 'cancel',
            },
            {
                text: 'Yes',
                onPress: () => handleBookingCancellation(booking),
            },
        ],
        { cancelable: false }
    );
};

const handleBookingCancellation = async (booking) => {
    try {
        const csrfToken = await getCsrfToken();
        if (!csrfToken) {
            Alert.alert('Error', 'Failed to fetch CSRF token');
            return;
        }

        const response = await axios.post(`http://127.0.0.1:8000/bookings/remove/?booking_id=${booking.booking_id}/`, {
            headers: {
                'Authorization': `Bearer ${await SecureStore.getItemAsync('access')}`,
                'X-CSRFToken': csrfToken 
            },
        });

        Alert.alert("Booking Cancelled", `Booking ID: ${booking.booking_id}`);
        console.log(response);
    } catch (error) {
        console.error('Error cancelling booking', error);
        Alert.alert('Error', 'There was an error cancelling the booking');
    }
};

<TouchableOpacity style={styles.confirmButton } onPress={() => handleConfirmButton(item)} >
    <Text style={styles.viewAllText}>Cancel Booking</Text>
    <AntDesign name="delete" size={24} color="white" style={styles.icon} />
</TouchableOpacity>

-- What I’ve Tried --

• Fetched the CSRF Token via a dedicated endpoint (/api/get-csrf-token/) and confirmed it returns a valid token
• Included the CSRF token in the headers of the React Native POST request
• Adjusted Django settings, ensuring settings like CSRF_TRUSTED_ORIGINS and CORS settings include the frontend URL
• Experimented with POST and DELETE methods along with proper headers such as Authorization, Content-Type, and X-CSRFToken

Despite these steps, the cancellation request still results in the 403 CSRF error. I was expecting the request to succeed, cancel the booking, and return a confirmation response as it does in Postman. Any insight or suggestions on why this might be happening and how to resolve it would be greatly appreciated.