Ошибка JSON.parse при добавлении jwt в заголовок

Question

Я сталкиваюсь с проблемой при отправке запроса от моей клиентской среды реагирования / избыточности в мой API. Конечная точка API ожидает токен jwt в заголовке «api-key», однако при отправке запроса я получаю ошибку JSON.parse SON.parse: unexpected character at line 1 column 1 of the JSON data.

Я предполагаю, что это из-за того, как JWT отформатирован, что предотвращает анализ JSON, но я не могу обернуть его вокруг. Спасибо.

При создании моего бэкэнда я не рассматривал эту проблему и поэтому подумал, что использование JWT в качестве ключа API было бы хорошо. В идеале я хотел бы продолжать использовать эту реализацию.

пример JWT: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVjMzMzNWJkZDY2NmM5MmYxMGQxMDU3MyIsInBlcm1pc3Npb25zIjowLCJ2IjowLCJpYXQiOjE1NDY4NTk5NjV9.WIL6vCO95BEV7DWbRMheAwIRRoYO3cQQbzPdIRVv4tI

Запрос на получение:

export const getUserData = token => {
    return async (dispatch, getState) => {

        console.log(typeof token);


        const response = await fetch("/api/user/data", {
            method: "post",
            headers: new Headers({
                "Content-Type": "application/json",
                "Accept": "application/json",
                "api-key": token
            })
        });

        const responseBody = await response.json();

        console.log("Response JSON Body:", responseBody);


        if (!response.ok) return dispatch({ type: AUTH_ERROR, payload: responseBody.message });

        if (response.ok) return dispatch({ type: GET_USER_DATA, payload: responseBody });
    };
};

Answer 1

Как сказано в комментариях @kemicofa, если ваша проблема от JSON.parse, то мы должны сосредоточиться на ответе сервера, а не на запросе вашего сервера.

Код должен быть готов получить неверный ответ от сервера и действовать соответственно:

Запрос на получение:

export const getUserData = token => {
    return async (dispatch, getState) => {

        console.log(typeof token);


        const response = await fetch("/api/user/data", {
            method: "post",
            headers: new Headers({
                "Content-Type": "application/json",
                "Accept": "application/json",
                "api-key": token
            })
        });


        let responseBody;
        try {
            responseBody = await response.json();
        } catch (e) {
            responseBody = await response.text();
            console.error('Server error response %s. json parse failed with error %s', responseBody, e.message)
            return dispatch({ type: AUTH_ERROR, payload: responseBody });
        }
        console.log("Response JSON Body:", responseBody);


        if (!response.ok) return dispatch({ type: AUTH_ERROR, payload: responseBody.message });

        if (response.ok) return dispatch({ type: GET_USER_DATA, payload: responseBody });
    };
};