Синтаксическая ошибка: неожиданный конец ввода JSON при регистрации пользователя в приложении MERN [закрыто] ⇐ Javascript

[Anonymous]

Я работаю над функцией регистрации и входа в веб-приложение, созданное с использованием стека MERN. Возникла проблема с функцией регистрации. Проблема возникает, когда я пытаюсь зарегистрировать пользователя. В консоли Chrome я обнаружил следующую ошибку:

Код: Выделить всё

JSON parse error: SyntaxError: Unexpected end of JSON input
at JSON.parse ()
at handleResponse (api.js:23:17)
at async register (useAuth.js:79:31)
at async handleSubmit (RegisterForm.jsx:26:5)

Я ожидаю, что пользователь будет зарегистрирован и ответ от сервера будет правильно проанализирован.
Происходит ошибка, предполагающая, что ответ от сервера не является допустимым JSON или пуст.
Вот соответствующая часть моего кода:

api.js.

Код: Выделить всё

import { jwt } from './jwt';

const API_BASE_URL = '/api';

export class ApiError extends Error {
constructor(status, message) {
super(message);
this.status = status;
}
}

async function handleResponse(response) {
// Debug response headers
console.log('Response headers:', [...response.headers.entries()]);

// Debug raw response
const rawResponse = await response.text();
console.log('Raw response:', rawResponse);

let data;
try {
// Try parsing the raw response
data = JSON.parse(rawResponse);
} catch (e) {
console.error('JSON parse error:', e);
console.error('Raw response that failed parsing:', rawResponse);
throw new ApiError(
response.status,
'Invalid response format from server'
);
}

if (!response.ok) {
console.error('API Error:', data);
throw new ApiError(
response.status,
data.message || data.error || 'An error occurred'
);
}

return data;
}

export const api = {
async login(credentials) {
try {
const response = await fetch(`${API_BASE_URL}/auth/login`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
credentials: 'include',
body: JSON.stringify({
email: credentials.email,
password: credentials.password,
}),
});

return handleResponse(response);
} catch (error) {
console.error('Login error:', error);
throw error;
}
},

async register(data) {
try {
const response = await fetch(`${API_BASE_URL}/auth/register`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
credentials: 'include',
body: JSON.stringify(data),
});

return handleResponse(response);
} catch (error) {
console.error('Register error:', error);
throw error;
}
},

setAuthHeader(token) {
return {
'Authorization': token ? `Bearer ${token}` : '',
'Content-Type': 'application/json',
};
},

async get(endpoint) {
try {
const token = jwt.getToken();
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
credentials: 'include',
headers: this.setAuthHeader(token),
});
return handleResponse(response);
} catch (error) {
console.error('GET request error:', error);
throw error;
}
},

async post(endpoint, data) {
try {
const token = jwt.getToken();
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
method: 'POST',
credentials: 'include',
headers: this.setAuthHeader(token),
body: JSON.stringify(data),
});
return handleResponse(response);
} catch (error) {
console.error('POST request error:', error);
throw error;
}
}
};

useAuth.js.

Код: Выделить всё

import { useState, useEffect } from 'react';
import { api } from '../utils/api';
import { jwt } from '../utils/jwt';

const initialState = {
isAuthenticated: false,
user: null,
loading: true,
error: null,
};

export function useAuth() {
const [authState, setAuthState] = useState(initialState);

useEffect(() => {
initializeAuth();
}, []);

const initializeAuth = async () => {
const token = jwt.getToken();

if (token &&  jwt.isTokenValid(token)) {
const decoded = jwt.decodeToken(token);
if (decoded) {
setAuthState({
isAuthenticated: true,
user: {
email: decoded.email,
name: decoded.name,
role: decoded.role,
},
loading: false,
error: null,
});
return;
}
}

jwt.removeToken();
setAuthState({ ...initialState, loading: false });
};

const login = async (credentials) => {
setAuthState(prev => ({ ...prev, loading: true, error: null }));

try {
const { token, user } = await api.login(credentials);

if (token && jwt.isTokenValid(token)) {
jwt.setToken(token, credentials.rememberMe);
setAuthState({
isAuthenticated: true,
user,
loading: false,
error: null,
});
return true;
} else {
throw new Error('Invalid token received');
}
} catch (error) {
const message = error instanceof Error
? error.message
: 'An error occurred during login';

setAuthState(prev => ({
...prev,
loading: false,
error: message,
}));
return false;
}
};

const register = async (data) => {
setAuthState(prev => ({ ...prev, loading: true, error: null }));

try {
const { token, user } = await api.register(data);

if (token && jwt.isTokenValid(token)) {
jwt.setToken(token, true);
setAuthState({
isAuthenticated: true,
user,
loading: false,
error: null,
});
return true;
} else {
throw new Error('Invalid token received');
}
} catch (error) {
const message = error instanceof Error
? error.message
: 'An error occurred during registration';

setAuthState(prev => ({
...prev,
loading: false,
error: message,
}));
return false;
}
};

const logout = () => {
jwt.removeToken();
setAuthState({
isAuthenticated: false,
user: null,
loading: false,
error: null,
});
};

return {
...authState,
login,
register,
logout,
};
}

RegisterForm.js.

Код: Выделить всё

import React, { useState } from 'react';
import { User, Mail, KeyRound, Calendar, Users, Loader2 } from 'lucide-react';
import styles from './RegisterForm.module.scss';

export function RegisterForm({ onSubmit, onShowLogin, loading, error }) {
const [formData, setFormData] = useState({
name: '',
email: '',
password: '',
confirmPassword: '',
birthday: '',
gender: '',
});
const [validationError, setValidationError] = useState(null);

const handleSubmit = async (e) => {
e.preventDefault();
setValidationError(null);

if (formData.password !== formData.confirmPassword) {
setValidationError("Passwords don't match");
return;
}

const { confirmPassword, ...registerData } = formData;
await onSubmit(registerData);
};

return (


Full Name


  setFormData({ ...formData, name: e.target.value })}
/>



Email


 setFormData({ ...formData, email: e.target.value })}
/>



Birthday


 setFormData({ ...formData, birthday: e.target.value })}
/>



Gender


 setFormData({ ...formData, gender: e.target.value })}
className={styles.select}
>
Select gender
Male
Female
Other




Password


 setFormData({ ...formData, password: e.target.value })}
/>



Confirm Password


 setFormData({ ...formData, confirmPassword: e.target.value })}
/>



{(error || validationError) && (

{error || validationError}

)}


{loading ? (


Creating account...

) : (
'Create account'
)}



Already have an account? Sign in



);
}

Я еще ничего не пробовал, кроме запроса Copilot. Мне бы хотелось получить реальную человеческую помощь, потому что я все еще учусь программировать.

Подробнее здесь: https://stackoverflow.com/questions/793 ... n-mern-app