Axios拦截器未正确添加Authorization头引发403错误求助

你的问题核心是Postman能正常调用API，但Axios请求返回403，结合你的代码，下面是具体的排查点和修复方案：

1. 移除多余的请求头配置 #

Access-Control-Allow-Origin是服务器响应头，不是客户端请求头，你在Axios实例里添加这个请求头完全多余，甚至可能被服务器判定为非法请求头导致拦截。直接删掉该配置：

let Authinstance = axios.create({
    baseURL: SERVER_URL + '/api',
    headers:{
        'Content-Type':'application/json; charset=utf-8'
        // 移除 'Access-Control-Allow-Origin': '*'
    }
})

2. 确保Authorization头正确添加 #

在拦截器里增加token存在性判断，避免token为空时生成无效的授权头（比如Bearer undefined），同时打印请求头确认配置：

Authinstance.interceptors.request.use( config => {
    const token = Auth().getToken();
    // 仅当token存在时才设置授权头
    if (token) {
        config.headers['Authorization'] =  `Bearer ${token}`;
    }
    // 打印请求头，确认Authorization字段是否正确
    console.log('发送的请求头:', config.headers);
    return config;
}, error => {
    // 处理拦截器错误
    return Promise.reject(error);
})

3. 排查请求实际发送的内容 #

打开浏览器开发者工具的Network面板，找到你的GET请求，重点查看：

• 请求头里是否存在Authorization字段，值是否和Postman里使用的完全一致（包括Bearer 前缀和token本身）
• 如果请求先发送了OPTIONS预检请求，检查该请求的响应状态是否为200，服务器是否返回了Access-Control-Allow-Headers: Authorization等必要的CORS头

4. 验证token有效性 #

从代码里打印出Auth().getToken()的返回值，复制这个token到Postman中替换原来的token，测试是否还能得到200响应：

• 如果Postman也返回403，说明Auth().getToken()获取的token无效（比如sessionStorage的key错误、token已过期）
• 如果Postman依然正常，说明问题出在Axios请求的其他配置或CORS上

5. 添加请求错误捕获 #

在getPayees函数里添加错误捕获，查看服务器返回的403详细信息，帮助定位问题：

export const getPayees = async() => {
    const username = Auth().getUser();
    try {
        const res = await Authinstance.get(`/netbanking/beneficiary/${username}`);
        return res.data;
    } catch (err) {
        // 打印完整错误信息，包括服务器返回的响应体
        console.error('请求失败详情:', {
            status: err.response?.status,
            headers: err.response?.headers,
            data: err.response?.data
        });
        throw err;
    }
}

内容的提问来源于stack exchange，提问作者2K19CO156 Himanshu