React JS中Bearer Token与令牌间空格缺失问题求助

问题场景 #

在React项目中从localStorage获取令牌，设置Axios的Authorization请求头时，Bearer与令牌之间的空格消失，导致请求头格式错误。

代码示例 #

const TOKEN = localStorage.getItem('TOKEN');
Axios.defaults.headers.common['Authorization'] = `Bearer ${TOKEN}`;

异常现象 #

请求头中Authorization字段的Bearer与令牌直接拼接，无空格：

Authorization: BearerN1ZuxkpgOlOfMGK3hrsl9N4UveoX-67hDH6jRDc5DgEA5yZpDxdyorIMCAeDV5vmHndKsapoYEqiXtoEPzT4vk6FQNOiQQRGdybZ-kfayEF2UaN7IJF0ui1nC8-hfpuzQddzBCg9PoskBzUJCc5ajYzp9VSNmo-nGtigEpyiqw7A5HDxi8GGytvkCGsM0-feW3FEy05VSKzkSu8pxTHR_Ism_uTTIxjrhiOEzMka5-qbhSQyTV1b5B_n_f_gsYX2

解决方法 #

1. 字符串拼接强制添加空格：改用字符串拼接方式明确保留空格，同时处理令牌可能存在的前后无效空格：

const TOKEN = localStorage.getItem('TOKEN');
if (TOKEN) {
  Axios.defaults.headers.common['Authorization'] = 'Bearer ' + TOKEN.trim();
} else {
  // 令牌不存在时删除请求头，避免无效字段干扰
  delete Axios.defaults.headers.common['Authorization'];
}

2. 严谨的模板字符串写法：在模板字符串中明确保留空格，同时增加令牌存在性判断，避免生成无效格式：

const TOKEN = localStorage.getItem('TOKEN');
Axios.defaults.headers.common['Authorization'] = TOKEN ? `Bearer ${TOKEN.trim()}` : undefined;

可能的原因 #

• 令牌存储时可能带有不可见特殊字符，或前后空格被意外截断，导致模板字符串的空格被覆盖；
• 令牌本身存在格式问题，通过trim()处理可规范令牌格式，确保空格正常显示。

内容的提问来源于stack exchange，提问作者govind jha