Django, React, Axios возвращают html вместо данных json
Я работаю над веб-приложением с Django Rest Framework и React.
Когда я делаю запрос к Django через http://localhost:8000/api/v1/auth/users/daniel/ для профиля пользователя, он возвращает JSON, но вместо того, чтобы возвращать ответ userProfile в качестве значения данных, он возвращает некоторый HTML-код реакции/Vite.
Ответ
<!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'),
]
view.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)
сериализаторы.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__'
профиль-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.info(response)
setUserProfile(response.data);
setIsOwnProfile(loggedInUsername === username);
} catch (error) {
console.error('Error fetching user profile:', error);
}
};
fetchUserProfile();
}, [username, loggedInUsername]);
console.info(userProfile);
if (!userProfile) {
return (
<div className = "flex justify-center items-center h-screen">
<div className = "text-lg font-semibold">Loading...</div>
</div>
);
}
Я пробовал выполнить поиск в инструментах разработчика, упростить возвращаемую модель и очистить кеш, так как в какой-то момент я увидел ответ 204, но мне не повезло.
Попробуйте установить новый заголовок в запросе axios: «Accept: application/json», ваш текущий Accept, вероятно, text/html.
Ответы 2
Представление 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()}`,
},
});Спасибо за объяснение. Я попробовал добавить это, но разницы нет. JSON возвращается, но значение data — это значение HTML as a string, упомянутое в моем вопросе, но значение должно быть объектом userProfile.
Чтобы решить проблему, мне пришлось добавить http://127.0.0.1:8000 к URL-адресу API.
http://127.0.0.1:8000/api/v1/auth/users/${username}.
Немного неловко, но иногда такова жизнь разработчика.
Что, если вы поставите
?format=jsonв конце?