javascript - 将 jwt 添加到标头时出现 JSON.parse 错误

Question

从我的 react/redux 前端向我的 API 发送请求时遇到问题。API 端点在“api-key”标头中需要一个 jwt 令牌，但是，我SON.parse: unexpected character at line 1 column 1 of the JSON data在尝试发送请求时收到 JSON.parse 错误。

我假设这是因为 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 });
    };
};

标签： javascriptjsonparsing

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 });
    };
};