Why is my Django REST Framework with SimpleJWT causing double backend requests in Angular?

Unexpected Double Requests with Django REST Framework and Angular

I’m having a weird issue with my Django backend using SimpleJWT and my Angular frontend. Every time I make a request, it sends two instead of one. Here are the logs I’m seeing:

GET /courses/stuff/get/lessons (401)
POST /courses/stuff/get/lessoninfo/ (401)
POST /users/token/refresh/ (400)
GET /courses/stuff/get/lessons (200)
POST /courses/stuff/get/lessoninfo/ (200)
GET /users/verify/ (200)

My HTTP interceptor in Angular also confirms multiple requests:

Request sent to: http://localhost:8000/courses/stuff/get/lessons
Request sent to: http://localhost:8000/courses/stuff/get/lessoninfo/
Access token exists, verifying user...
Request sent to: http://localhost:8000/users/verify/

I’ve also reviewed my token refresh view and a sample API view, but nothing seems to explain why the first 401 error occurs and then a retry results in success. Has anyone encountered this issue or have suggestions for resolving it?

yo, that’s a tricky one! have u checked ur network tab in devtools? sometimes it shows whats really goin on. also, maybe ur token refresh logic is triggerin extra requests? could be worth checkin if ur refresh is happenin before every call. just a thought, hope it helps!

This issue could stem from your token refresh mechanism. The initial 401 errors suggest your access token might be expiring, triggering a refresh attempt. However, the subsequent successful requests indicate the refresh is working.

Consider implementing a more robust token refresh strategy. You could use a queue system for outgoing requests, holding them until the token is refreshed. This approach can prevent the duplicate requests you’re seeing.

Additionally, examine your Angular interceptor. Ensure it’s not inadvertently duplicating requests during the token refresh process. A well-structured interceptor should handle token expiration gracefully, refreshing only when necessary and avoiding redundant API calls.

Lastly, review your backend configuration. Verify that your SimpleJWT settings, particularly token lifetime and refresh handling, align with your frontend’s expectations.

hmm, that’s an interesting issue! have you tried checking your Angular interceptor logic? sometimes, it can trigger multiple requests if not handled properly. maybe there’s a race condition happening? also, are you using any caching mechanisms that could be interfering? it’d be cool to see your interceptor code if you’re comfortable sharing it!