Django, React, Axios возвращают html вместо json-данных

Я работаю над веб-приложением с использованием Django Rest Framework и React.

Когда я делаю запрос к Django через http://localhost:8000/api/v1/auth/users/daniel/ для профиля пользователя, он возвращает JSON, но вместо ответа с userProfile в качестве значения данных, он возвращает некоторый react/vite HTML код.

Ответ enter image description here

<!doctype html>
<html lang="en">
  <head>
    <script type="module">
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>

    <script type="module" src="/@vite/client"></script>

    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx?t=1717529669140"></script>
  </body>
</html>

Вот ответ DRF на то, что я ожидаю увидеть в ответе Reac Axios.

enter image description here

urls.py

urlpatterns = [
    .....,
    path('api/v1/auth/users/<str:username>/', views.UserProfileByUsernameView.as_view(), name='user-profile-by-username'),
]

views.py

class UserProfileByUsernameView(APIView):
    permission_classes = [AllowAny]

    def get(self, request, username):
        user = get_object_or_404(User, username=username)
        profile_serializer = UserProfileSerializer(user.userprofile)
        
        profile_data = profile_serializer.data
        profile_data['username'] = user.username
        profile_data['email'] = user.email

        return Response(profile_data, status=status.HTTP_200_OK)

serializers.py

class UserProfileSerializer(serializers.ModelSerializer):
    username = serializers.CharField(source='user.username', read_only=True)
    email = serializers.EmailField(source='user.email', read_only=True)
    
    class Meta:
        model = UserProfile
        fields = '__all__'

profile-page.jsx

const ProfilePage = () => {
  const { username } = useParams();
  const [userProfile, setUserProfile] = useState(null);
  const [isOwnProfile, setIsOwnProfile] = useState(false);
  const loggedInUsername = localStorage.getItem('username');

  useEffect(() => {
    const fetchUserProfile = async () => {
      try {
        const response = await axios.get(`/api/v1/auth/users/${username}/`, {
          headers: {
            'Authorization': `Bearer ${userToken()}`,
          },
        });
        console.log(response)
        setUserProfile(response.data);
        setIsOwnProfile(loggedInUsername === username);
      } catch (error) {
        console.error('Error fetching user profile:', error);
      }
    };

    fetchUserProfile();
  }, [username, loggedInUsername]);

  console.log(userProfile);

  if (!userProfile) {
    return (
      <div className="flex justify-center items-center h-screen">
        <div className="text-lg font-semibold">Loading...</div>
      </div>
    );
  }

Я пробовал искать в инструментах разработчика, упрощать возвращаемую модель и очищать кэш, так как в какой-то момент я видел 204 ответа, но мне ничего не удалось.

Вид DRF сам по себе не рендерится в JSON. На самом деле страница, на которую вы смотрите, не является JSON. Нет, это HTML, который показывает некоторые данные JSON.

Вы можете указать DRF, какой формат использовать, используя заголовок HTTP Content-Type или добавив значение format в строке запроса, например:

const response = await axios.get(`/api/v1/auth/users/${username}/?format=json`, {
  headers: {
    'Authorization': `Bearer ${userToken()}`,
  },
});

Чтобы решить проблему, мне пришлось добавить http://127.0.0.1:8000 к URL-адресу API.

http://127.0.0.1:8000/api/v1/auth/users/${username}.

Слегка неловко, но такова иногда жизнь разработчика.

Вернуться на верх