Django, React, Axios возвращают html вместо json-данных
Я работаю над веб-приложением с использованием Django Rest Framework и React.
Когда я делаю запрос к Django через http://localhost:8000/api/v1/auth/users/daniel/
для профиля пользователя, он возвращает JSON, но вместо ответа с userProfile в качестве значения данных, он возвращает некоторый react/vite HTML код.
<!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.
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}
.
Слегка неловко, но такова иногда жизнь разработчика.