React frontend and Django backend communication issue

Frontend
1

I’m working on a web app for my final year project. The frontend is in React and the backend uses Django with SQLite. Everything should be working, but I’m having trouble getting the frontend to talk to the backend.

The homepage loads fine, but I can’t get to any other pages. When I try to sign in or sign up, it just goes back to the homepage. I’ve checked CORS settings, made sure the URLs are correct, and tried running production builds. But nothing seems to work.

I’ve put the build folder from the frontend into the backend directory. When I start both servers, they run without errors. The backend pages work fine on their own. But the frontend just won’t connect properly.

Here’s what my Django settings look like:

INSTALLED_APPS = [
    # ... standard Django apps ...
    'rest_framework_simplejwt',
    'api',
    'rest_framework',
    'djoser',
    'corsheaders',
    'backend',
    'rest_framework_simplejwt.token_blacklist',
]

CORS_ALLOWED_ORIGINS = [
    'http://localhost:3000',
    'http://127.0.0.1:8000',
    # ... other origins ...
]

# ... database and static file settings ...

And my urls.py:

urlpatterns = [
    path('admin/', admin.site.urls),
    path('auth/', include('djoser.urls')),
    path('auth/', include('djoser.urls.jwt')),
    path('news/', views.NewsView.as_view()),
    # ... other paths ...
]

# ... static and catch-all URL patterns ...

Any ideas on what could be causing this? I’m really stuck and running out of time to submit my project.

2

Have you considered the possibility of a mismatch between your frontend and backend API endpoints? It’s crucial to ensure that the URLs your React components are calling align precisely with the paths defined in your Django urls.py. Additionally, verify that your React app is properly handling authentication tokens if you’re using JWT. Sometimes, the issue lies in how the frontend manages and sends these tokens with each request. Another aspect to examine is your Django middleware configuration. Ensure that the ‘corsheaders.middleware.CorsMiddleware’ is placed at the beginning of the MIDDLEWARE list in your settings.py. This can sometimes resolve CORS-related communication issues between frontend and backend.

3

yo whistperingwind, have u tried checkin ur react router setup? sometimes the issue’s there. make sure ur routes r defined correctly and match ur backend urls. also, double-check ur api calls in react - they might be usin the wrong base url. good luck with ur project!

4

hey, im curius if you’ve checked the dev tools network tab. it might show misrouted react paths or other clues. any further insights?