使用Axios+JWT对接WordPress时Authorization header格式错误排查

我尝试使用Axios和JWT在WordPress中注册用户并获取用户数据，以下是我的代码：

const signupdata = {
  username: loginFields.email,
  email: loginFields.email,
  password: loginFields.password
}
axios.post('http://nextjs-headless-wordpress.local/wp-json/jwt-auth/v1/token', loginData)
  .then(res => {
    if (res.data) {
      console.log('authToken' + res.data.data.token);
      //axios.defaults.headers.common['Authorization'] = res.data.data.token;

      axios.post('http://nextjs-headless-wordpress.local/wp-json/wp/v2/users', signupdata, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          "Accept": "application/json",
          'Authorization': 'Bearer ' + res.data.data.token
        }
      }).then(response => {
        if (response.data) {
          console.log(response.data)
        }
      }).catch(error => {
        console.log('User Data response Error: ' + error)
      })

    }
});

第一个axios.post请求能成功获取到token，但调用用户数据接口时，一直返回如下错误：

{success: false, statusCode: 403, code: 'jwt_auth_bad_auth_header', message: 'Authorization header malformed.', data: Array(0)}

已确认token正确，请问代码哪里出了问题？

1. 修正token的获取路径 #

WordPress的JWT Auth插件返回的token通常直接在res.data.token字段下，而非res.data.data.token。你可以先在控制台打印完整的返回数据确认结构：

console.log('接口完整返回:', res.data);

如果返回结构是{ token: "xxx", user_email: "xxx", ... }，则需要把token的获取路径改成res.data.token，对应的Authorization header代码调整为：

'Authorization': 'Bearer ' + res.data.token

2. 匹配请求体格式与Content-Type #

你当前设置的Content-Type: application/x-www-form-urlencoded，但提交的signupdata是JSON对象，Axios默认会将JSON对象转换为application/json格式的请求体，这会导致格式不匹配，触发服务器验证错误。

• 如果接口支持JSON格式，直接删除Content-Type配置，或显式设置为application/json：

headers: {
  "Accept": "application/json",
  'Authorization': 'Bearer ' + res.data.token
}

• 如果必须使用application/x-www-form-urlencoded，需要将signupdata转为URL编码格式，可借助qs库处理：

import qs from 'qs';

// 接口请求部分修改为
axios.post('http://nextjs-headless-wordpress.local/wp-json/wp/v2/users', qs.stringify(signupdata), {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    "Accept": "application/json",
    'Authorization': 'Bearer ' + res.data.token
  }
})

3. 确认接口权限 #

/wp/v2/users接口创建用户需要管理员权限，若你用来获取token的账号是普通用户，会返回权限相关错误。需确保获取token的账号为管理员角色，或修改REST API权限配置（不推荐，存在安全风险）。

4. 清理token的多余空格 #

拼接Bearer 时注意后方有一个空格，若token本身前后存在多余空格，也会导致header格式错误，可通过trim()处理：

'Authorization': 'Bearer ' + res.data.token.trim()

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