"You need to enable JavaScript to run this app"; response is html instead of json

Question

Technologies used: Django, Djoser, react.js, webpack

I made the request in react.js:

const config = {
    headers: {
      "Content-Type": "application/json",
    },
  };

  const body = JSON.stringify({
    email,
    first_name,
    last_name,
    password,
    re_password,
  });
const response = await axios.post(
      `http://127.0.0.1:8000/auth/users/`,
      body,
      config
    )

I used Djoser in the backend to handle the auth requests.

I console.log the response and find that the response is html instead of JSON. The status is 200 but it should be HTTP_201_CREATED based on Djoser's documentation.

I checked that Djoser is in INSTALLED_APPS in Django and I have djoser==2.1.0. I try to add "proxy": "http://127.0.0.1:8000", in package.json, not working. I also try to use fetch instead of axios, also not working. I am not sure where the problem comes from.

Answer 1

I figured it out.

The status code is wired and looks like it does not call the Djoser endpoint.

I found that in my config.urls (backend) I have

urlpatterns = [
    path('', include('frontend.urls')),
    path('auth/', include('djoser.urls')),
    path('auth/', include('djoser.urls.jwt'))
]

So the auth/ endpoints will go through frontend.urls instead of Djoser.

After I change it to

urlpatterns = [
    path('auth/', include('djoser.urls')),
    path('auth/', include('djoser.urls.jwt')),
    path('', include('frontend.urls')),
]

it works.