React & Django DRF: Instantly Fix 5 Common Bugs in 2025

Access to fetch at 'http://localhost:8000/api/posts' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

pip install django-cors-headers

# in settings.py

INSTALLED_APPS = [
    # ...
    "corsheaders",
    # ...
]

MIDDLEWARE = [
    "corsheaders.middleware.CorsMiddleware", # Make sure it's high up, especially before CommonMiddleware
    "django.middleware.security.SecurityMiddleware",
    # ...
]

# Whitelist your React app's origin
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",
    "http://127.0.0.1:3000",
]

# For production, you'd use your actual frontend domain:
# CORS_ALLOWED_ORIGINS = [
#     "https://your-react-app.com",
# ]

The best approach is to set up a global Axios instance that automatically handles the CSRF token.

// src/api/axios.js

import axios from 'axios';

// Function to get a cookie by name
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

const csrftoken = getCookie('csrftoken');

const apiClient = axios.create({
    baseURL: 'http://localhost:8000/api',
    headers: {
        'X-CSRFToken': csrftoken
    }
});

export default apiClient;

Now, instead of using `axios.post(...)` in your components, you import and use your configured client: `apiClient.post(...)`. It will automatically include the `X-CSRFToken` header on every request.

Bug 3: Authentication Headaches with JWT

You've implemented JWT (JSON Web Tokens) for authentication. The user logs in, you get a token back, but then every subsequent request to a protected endpoint fails with a `401 Unauthorized` error.

The Cause

Simply receiving a JWT isn't enough. You have to store it on the client-side and then attach it to the `Authorization` header of every subsequent request to a protected route. Forgetting to do this is the most common reason for auth failures.

The Instant Fix

Use an Axios interceptor to automatically attach the token. This is far more robust than adding it manually in every API call.

1. Store the token upon login:

After a successful login, store the access token from the DRF response. `localStorage` is common, but be aware of XSS risks. For higher security, consider using `httpOnly` cookies managed by your backend.

// Inside your login function
const response = await apiClient.post('/token/', { username, password });
const accessToken = response.data.access;
localStorage.setItem('accessToken', accessToken);

2. Create an Axios interceptor:

Modify your `axios.js` file to add an interceptor. This is a function that runs before each request is sent.

// src/api/axios.js (updated)

// ... (keep the previous code)

// Add a request interceptor
apiClient.interceptors.request.use(config => {
    const token = localStorage.getItem('accessToken');
    if (token) {
        config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
}, error => {
    return Promise.reject(error);
});

export default apiClient;

With this interceptor in place, every call made with `apiClient` will automatically check for an access token in `localStorage` and attach it as a `Bearer` token in the headers. Your protected routes will now work seamlessly.

Bug 4: Cryptic 400 Bad Request on Form Submissions

A user submits a form, the network tab shows a `400 Bad Request`, but your React UI just sits there. You know a DRF serializer validation failed, but how do you show the user what went wrong (e.g., “This email is already in use”)?

The Cause

DRF sends back a beautifully structured JSON object with validation errors when a `400 Bad Request` occurs. Your React code is simply not catching this error and using the payload to update the UI state.

// Example DRF 400 Response Body
{
  "email": ["user with this email already exists."],
  "password": ["Password is too short."]
}

The Instant Fix

Use a `try...catch` block in your form submission handler and store the error response in your component's state.

// Inside a React component (e.g., Register.js)

import React, { useState } from 'react';
import apiClient from '../api/axios';

function Register() {
    const [formData, setFormData] = useState({ username: '', email: '', password: '' });
    const [errors, setErrors] = useState({}); // State to hold validation errors

    const handleSubmit = async (e) => {
        e.preventDefault();
        setErrors({}); // Clear previous errors
        try {
            await apiClient.post('/users/', formData);
            // Redirect or show success message
        } catch (error) {
            if (error.response && error.response.status === 400) {
                console.log(error.response.data); // Log to see the structure
                setErrors(error.response.data);
            }
        }
    };

    // ... (onChange handler for form inputs)

    return (
        

            
            {errors.username && 
{errors.username[0]}
}

            
            {errors.email && 
{errors.email[0]}
}

            
            {errors.password && 
{errors.password[0]}
}
            
            Register
        
    );
}

By capturing the error response and setting it to a state variable, you can now easily display user-friendly error messages right next to the corresponding form fields.

Bug 5: The 404 Error on Page Refresh

Your React app works perfectly. You can navigate from `/` to `/posts/123` and everything looks great. But if you're on `/posts/123` and hit the refresh button, you get a Django 404 Not Found error. Uh oh.

The Cause

This is a classic Single-Page Application (SPA) problem. React Router handles routing on the client-side. When you navigate from `/` to `/posts/123` in the app, the browser's URL changes, but no request is sent to the server. However, when you hit refresh, the browser makes a direct `GET` request to the server for the path `/posts/123`. Your Django server looks at its `urls.py` and, unless you have an API endpoint at that exact path, it says “I have no idea what this is” and returns a 404.

The Instant Fix

You need to configure Django to serve your main React `index.html` file for any non-API route. This lets React Router take over and handle the routing on the client-side.

1. Set up a catch-all URL in Django:

In your project's main `urls.py`, add a `re_path` that catches everything that isn't your API or admin panel and serves your frontend's entry point.

# myproject/urls.py

from django.contrib import admin
from django.urls import path, include, re_path
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('api.urls')), # Your DRF API routes
    
    # This catch-all route should be last
    re_path(r'^.*', TemplateView.as_view(template_name='index.html')),
]

2. Configure Django to find your React build:

In `settings.py`, tell Django where your React `build` folder is located.

# settings.py

import os

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # Tell Django to look for templates in React's build folder
        'DIRS': [os.path.join(BASE_DIR, 'frontend/build')], 
        'APP_DIRS': True,
        # ...
    },
]

STATICFILES_DIRS = [
    # Tell Django where to find React's static files (CSS, JS, images)
    os.path.join(BASE_DIR, 'frontend/build/static'),
]

Now, when you refresh `/posts/123`, Django will serve `index.html`, your React app will load, React Router will see the URL, and it will correctly render the `PostDetail` component. Problem solved.

---

Conclusion

The React and DRF stack is incredibly powerful, and these common bugs are just small hurdles on the path to building something great. By understanding why they happen, you can fix them quickly and write more resilient code from the start.

Next time you see a CORS policy block, a CSRF failure, or a mysterious 404 on refresh, you’ll know exactly what to do. Happy coding!