需Authorization Token的API无法调用问题求助

问题描述 #

调用需要Authorization Token的API时数据获取失败，无需Token的API可正常运行。使用fetch实现请求时出现错误，改用Axios后出现AxiosError，控制台报错见附图。

原代码 #

const [userData, setUserData] = useState({ member: [] });

const getDetail = async () => {
    try {
        const token = localStorage.getItem('token');
        // console.log(token);
        const decodedToken = jwtDecode(token);
        // console.log('Decoded token is ', decodedToken);
        if (!token) {
            console.log('token not found');
            return;
        }

        const response = await fetch(`http://localhost:5000/student/detail`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                authorization: `${token}`,
            },
        });

        if (!response.ok) {
            console.log('error fetching detail', response);
        }

        const json = await response.data;
        // console.log('json is ', json)
        setUserData(json);
    } catch (err) {
        console.log('error is ', err);
    }
}

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

问题分析与修复方案 #

1. Fetch请求的核心错误

• 响应解析错误：Fetch API的响应对象没有data属性，必须调用response.json()方法解析JSON响应体，这是和Axios的关键区别。
• Authorization头格式不规范：绝大多数后端要求该头遵循Bearer ${token}格式，直接传入token会导致鉴权失败。
• 错误处理不完整：当response.ok为false（状态码不在200-299区间）时，需主动抛出错误进入catch块，否则后续解析代码会继续执行，引发新错误。
• Token空值处理顺序错误：先调用jwtDecode(token)再判断token是否存在，token为null时会直接触发解码错误，应先判断token存在再解码。

2. 修正后的Fetch版本代码

const [userData, setUserData] = useState({ member: [] });

const getDetail = async () => {
    try {
        const token = localStorage.getItem('token');
        if (!token) {
            console.log('token not found');
            return;
        }
        // 先确认token存在再解码
        const decodedToken = jwtDecode(token);
        console.log('Decoded token is ', decodedToken);

        const response = await fetch(`http://localhost:5000/student/detail`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                // 修正Authorization头格式
                Authorization: `Bearer ${token}`,
            },
        });

        if (!response.ok) {
            // 抛出错误携带响应状态信息
            throw new Error(`请求失败：${response.status} ${response.statusText}`);
        }

        // 用response.json()解析响应体
        const json = await response.json();
        console.log('json is ', json);
        setUserData(json);
    } catch (err) {
        console.log('error is ', err);
    }
}

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

3. Axios版本的修正方案

改用Axios时，需注意格式规范和错误处理：

import axios from 'axios';

const [userData, setUserData] = useState({ member: [] });

const getDetail = async () => {
    try {
        const token = localStorage.getItem('token');
        if (!token) {
            console.log('token not found');
            return;
        }
        const decodedToken = jwtDecode(token);
        console.log('Decoded token is ', decodedToken);

        const response = await axios.get('http://localhost:5000/student/detail', {
            headers: {
                'Content-Type': 'application/json',
                Authorization: `Bearer ${token}`
            }
        });

        setUserData(response.data);
    } catch (err) {
        // 打印AxiosError的详细错误信息
        console.log('error is ', err.response?.data || err.message);
    }
}

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

额外排查点 #

• 确认localStorage中的token是否有效（未过期、签名正确）
• 检查后端是否允许跨域请求（前后端端口不同时需配置CORS）
• 查看控制台Network面板，确认请求头中Authorization是否正确携带，以及响应的状态码和错误内容

内容的提问来源于stack exchange，提问作者Ameer Hamza khan