创建HTTP客户端实例报错：Cannot read properties of undefined (reading 'create')

核心原因 #

报错Cannot read properties of undefined (reading 'create')本质是axios.default为undefined，导致无法调用create方法，主要由以下问题引发：

1. 导入方式与模块环境不匹配
   代码混用了CommonJS的require导入和ES模块的export default导出。在ES模块环境中（比如用Vite、Webpack构建或浏览器原生ES模块），用require导入axios时，默认导出会被放在axios.default下，但正确的做法应该是用import导入；如果是CommonJS环境（比如Node.js），axios本身就是直接导出的对象，不需要访问.default。

2. 冗余的window.localStorage调用
   代码中localStorage.getItem("Authorization") || window.localStorage.getItem("Authorization")是冗余的——localStorage本身就是window的属性，在已经判断typeof window !== 'undefined'的前提下，直接用localStorage.getItem即可，不过这不是导致当前报错的直接原因。

修复方案 #

方案1：改用ES模块导入（推荐）

将require替换为import，并去掉.default：

import axios from 'axios';

let access_token = typeof window !== 'undefined' ? localStorage.getItem("Authorization") : null;
let token = JSON.parse(access_token)?.token;

const axiosFetch = axios.create({
  baseURL: "http://localhost:5000",
  headers: {
    Authorization: `Bearer ${token || ''}`,
  }
});

export default axiosFetch;

方案2：保留require但去掉.default

如果项目是CommonJS环境，直接使用axios.create即可：

const axios = require("axios");

let access_token = typeof window !== 'undefined' ? localStorage.getItem("Authorization") : null;
let token = JSON.parse(access_token)?.token;

const axiosFetch = axios.create({
  baseURL: "http://localhost:5000",
  headers: {
    Authorization: `Bearer ${token || ''}`,
  }
});

module.exports = axiosFetch;

额外优化建议 #

• 给token设置默认空字符串，避免出现Bearer undefined的无效请求头；
• 如果是SSR（服务端渲染）环境，建议在请求拦截器中动态获取令牌，而不是实例创建时一次性获取——因为服务端不存在localStorage，会导致令牌始终为null。

内容的提问来源于stack exchange，提问作者Paras Bansal