为什么拦截器中的 `config.headers` 可能未定义

Question

我是 nodejs 的新手，所以我很难解决一些问题，提前谢谢你。所以这是我的 .../src/http/index.ts 文件

import axios from 'axios'

export const API_URL = `http://localhost:5000/api`

const $api = axios.create({
    withCredentials: true,
    baseURL: API_URL
})

$api.interceptors.request.use((config) => {
    config.headers.Authorization= `Bearer ${localStorage.getItem('token')}`
    return config
})

export default $api

和 config.headers 这里有下划线，ts 告诉我

Object is possibly 'undefined'.  TS2532
12 |
13 | $api.interceptors.request.use((config) => {
14 |     config.headers.Authorization= `Bearer ${localStorage.getItem('token')}`
   |     ^
15 |     return config
16 | })
17 |

我想了很久也想不通问题是什么

AxiosRequestConfig.headers?: Record<string, string>

Answer 1

错误告诉你Axios为其API、config定义其TypeScript类型的方式在你的拦截器函数被调用时可能是undefined。（而且它 looks that way in the TypeScript playground as well.) The interceptors documentation 什么也没说，这看起来很奇怪。

如果您确定 config 参数永远不会是 undefined，您可以包含一个声明：

$api.interceptors.request.use((config) => {
    if (!config?.headers) {
        throw new Error(`Expected 'config' and 'config.headers' not to be undefined`);
    }
    config.headers.Authorization= `Bearer ${localStorage.getItem('token')}`;
    return config;
});

如果您不正确，将导致运行时错误。

如果您不确定，可以根据需要创建配置：

$api.interceptors.request.use((config) => {
    if (!config) {
        config = {};
    }
    if (!config.headers) {
        config.headers = {};
    }
    config.headers.Authorization= `Bearer ${localStorage.getItem('token')}`;
    return config;
});

为什么拦截器中的 `config.headers` 可能未定义

Why `config.headers` in interceptor is possibly undefined

http

interceptor

node.js

typescript

axios