React中无法为Axios设置默认Auth用户名和密码问题求助

问题原因 #

你遇到的Cannot set properties of undefined (setting 'username')错误，本质是**axios.defaults.auth初始值为undefined**，直接尝试给它的子属性赋值会触发类型错误。而单个请求中直接传入完整的auth对象有效，是因为你直接创建了新对象传给请求配置。

正确配置方式 #

不要逐个设置auth的子属性，直接给axios.defaults.auth赋值完整配置对象，同时正确设置自定义user_token头：

// 初始化auth对象，避免undefined问题
axios.defaults.auth = {
  username: process.env.REACT_APP_AUTH_USERNAME,
  password: process.env.REACT_APP_AUTH_PASSWORD
};

// 设置自定义user_token请求头，增加空值判断避免解析错误
const uid = localStorage.getItem("uid");
axios.defaults.headers.common["user_token"] = uid ? JSON.parse(uid) : "";

补充说明 #

• Axios的defaults.auth是可选配置项，默认不存在（即undefined），必须先赋值包含username和password的对象，Axios才会自动为所有请求生成Basic Auth的Authorization头。
• 对localStorage.getItem("uid")加空值判断，能避免uid不存在时JSON.parse抛出的解析错误，提升代码健壮性。
• 配置完成后，后续所有Axios请求都会自动带上Basic Auth信息和user_token头，无需在每个请求中重复配置。

内容的提问来源于stack exchange，提问作者Dev Sharma