Vue搭配Laravel Sanctum使用API令牌时出现请求头错误如何解决

这个报错是前端XMLHttpRequest设置请求头时检测到头值包含非法字符导致的，不是后端接口返回的错误，可按以下步骤排查：

• 校验localStorage中存储的token合法性
  在拦截器中打印token确认值是否正常：

  axios.interceptors.request.use(function (config) {
    const token = localStorage.getItem('token')
    console.log('原始token值:', token)
    // 其余逻辑
  })
  

  检查token是否为null/undefined，是否包含换行、回车、首尾空格、不可见控制字符，如果有上述问题，需要修正token存储逻辑，取出token时可以调用trim()方法清除首尾空白字符。
• 修正axios请求头设置方式
  原代码直接覆盖config.headers.common整个对象，会清除axios默认携带的其他合法请求头，同时未做token存在判断，无token时会生成Bearer null这类非法头值，修改为以下写法：

  axios.interceptors.request.use(function (config) {
    const token = localStorage.getItem('token')
    // 仅在token存在时设置Authorization头
    if (token) {
      config.headers.common['Authorization'] = `Bearer ${token.trim()}`
    }
    config.headers.common['Content-Type'] = 'application/json'
    config.headers.common['Accept'] = 'application/json'
    return config
  })
  

• 排查后端token返回逻辑
  检查Laravel后端生成token后返回给前端的响应，确认返回的token值没有多余的换行、空格或其他转义字符，避免前端存储的token本身就包含非法字符。
• 排查浏览器干扰项
  禁用所有浏览器扩展插件后重新测试，部分修改请求头的插件会注入非法字符导致该报错。

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