Axios 1.1.3配置JWT认证遇TS2339错误求助

针对你遇到的Property 'Authorization' does not exist on type 'AxiosHeaders'错误，这是因为Axios 1.x版本对headers的类型定义做了调整，直接通过点语法访问自定义头会触发类型检查失败。以下是几种可行的解决办法：

方案1：使用方括号索引访问 #

直接用字符串索引的方式设置头，绕过TypeScript的点语法类型检查：

axiosPrivate.interceptors.request.use((req) => {
    const token = selectCurrentToken(store.getState());

    if (token) {
        req.headers!['Authorization'] = `Bearer ${token.accessToken}`;
    }
    return req;
}, (err) => Promise.reject(err));

方案2：类型断言为RawAxiosHeaders #

将req.headers断言为RawAxiosHeaders类型，明确允许访问Authorization属性：

import type { RawAxiosHeaders } from 'axios';

axiosPrivate.interceptors.request.use((req) => {
    const token = selectCurrentToken(store.getState());

    if (token) {
        (req.headers! as RawAxiosHeaders).Authorization = `Bearer ${token.accessToken}`;
    }
    return req;
}, (err) => Promise.reject(err));

方案3：使用AxiosHeaders的set方法 #

如果req.headers是AxiosHeaders实例，可以用它内置的set方法来设置头，同时兼容两种类型情况：

import { AxiosHeaders } from 'axios';

axiosPrivate.interceptors.request.use((req) => {
    const token = selectCurrentToken(store.getState());

    if (token) {
        const authHeader = `Bearer ${token.accessToken}`;
        if (AxiosHeaders.isAxiosHeaders(req.headers)) {
            req.headers.set('Authorization', authHeader);
        } else {
            req.headers!['Authorization'] = authHeader;
        }
    }
    return req;
}, (err) => Promise.reject(err));

额外排查：解决机器间差异 #

部分机器报错而同事正常，大概率是依赖或TypeScript版本不一致导致的：

• 执行rm -rf node_modules package-lock.json后重新安装依赖
• 确保项目中TypeScript版本和同事一致，可在package.json中锁定TS版本

内容的提问来源于stack exchange，提问作者Aneesh Pothuru