Неожиданный токен < в JSON при использовании функции fetch()

Я пытаюсь подключить мою страницу регистрации React к API Django, чтобы при регистрации пользователя создавался профиль пользователя в Django.

Я получаю эту ошибку на своей консоли, когда пытаюсь создать нового пользователя:

Signup.js:33          POST http://127.0.0.1:8000/api/v1/users/profiles/?format=api 400 (Bad Request)
onSubmit @ Signup.js:33
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237

VM1121:5 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 4

Вот что я вижу в сетевом инспекторе:

POST /api/v1/users/profiles/?format=api
HTTP 400 Bad Request
Allow: GET, POST, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "detail": "JSON parse error - Expecting value: line 1 column 2 (char 1)"
}

Вот код, который у меня есть в файле signup.js:

const onSubmit = e => {
    e.preventDefault();

    const user = {
        email: email,
        name: name,
        location: 'Example',
        password: password,
        user_id: 1
    };
    console.log(user);
    fetch('http://127.0.0.1:8000/api/v1/users/profiles/?format=api', {
        method: 'POST',
        headers: {
            'Content-Type':'application/json'
        },
        body: JSON.stringify(user)
    })
        .then(res => res.json())
        .then(data => {
            if (data.key) {
                localStorage.clear();
                localStorage.setItem('token',data.key);
                window.location.replace('http://localhost:3000/profile/');
            } else {
                setEmail('');
                setName('');
                setPassword('');
                localStorage.clear();
                setErrors(true);
            }
        });
};

и в settings.py:

CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True

CORS_ALLOW_METHODS = [
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
]

Я предполагаю, что использую правильную конечную точку. Когда я запускаю свой сервер django и посещаю этот URL, вот что я вижу:

GET /api/v1/users/profiles/?format=api
HTTP 200 OK
Allow: GET, POST, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

[
    {
        "user_id": 1,
        "name": "",
        "location": "",
        "password": "",
        "email": "",
        "signup_confirmation": false
    }
]

Как вы указали в сетевых журналах, он выдает "400 Bad Request", возможно, вам придется проверить, отправляете ли вы запрос на правильную конечную точку и правильно ли указаны методы и детали запроса в вызове fetch.

Эта ошибка является распространенной и в большинстве случаев возникает, когда сервер возвращает HTML вместо JSON. Поскольку в ошибке указано, что она не может идентифицировать "<", что обычно вызвано тем, что теги html обнаруживаются заранее.

Чтобы исправить эту ошибку, необходимо выяснить, почему вы получаете HTML (или что-то другое) вместо ожидаемого JSON. Для этого вам нужно записать данные, которые вы пытаетесь разобрать, в консоль, как показано ниже.

fetch('http://127.0.0.1:8000/api/v1/users/profiles/?format=api')
  .then(res => res.text())          // convert to plain text
  .then(text => console.log(text))  // then log it out
Вернуться на верх