错误:在Wordpress中使用Axios和JWT时授权头格式错误

tjvv9vkg  于 2023-10-18  发布在  iOS
关注(0)|答案(3)|浏览(194)

我试图注册一个用户,并以某种方式获得用户数据使用Axios和JWT与WordPress的。我从这个issue下面是我的代码:

  1. const signupdata = {
  2. username: loginFields.email,
  3. email: loginFields.email,
  4. password: loginFields.password
  5. }
  6. axios.post('http://nextjs-headless-wordpress.local/wp-json/jwt-auth/v1/token', loginData)
  7. .then(res => {
  8. if (res.data) {
  9. console.log('authToken' + res.data.data.token);
  10. //axios.defaults.headers.common['Authorization'] = res.data.data.token;
  11. axios.post('http://nextjs-headless-wordpress.local/wp-json/wp/v2/users', signupdata, {
  12. headers: {
  13. 'Content-Type': 'application/x-www-form-urlencoded',
  14. "Accept": "application/json",
  15. 'Authorization': 'Bearer ' + res.data.data.token
  16. }
  17. }).then(response => {
  18. if (response.data) {
  19. console.log(response.data)
  20. }
  21. }).catch(error => {
  22. console.log('User Data response Error: ' + error)
  23. })
  24. }
  25. });

我能够在第一次调用axios.post时获得令牌,但当我尝试获取userdata时,总是出现此错误

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

我检查了一下,似乎我在调用www.example.com到WordPress时使用了正确的tokenaxios.post。我的代码哪里出错了?请帮帮我谢谢

hmtdttj4

hmtdttj41#

检查令牌本身是否有效。您可以使用像this这样的工具来解码令牌。
具体而言,您应确保:

  • 令牌实际上没有格式错误(存在解码令牌)
  • 令牌未过期
  • 如果你知道密钥;验证其签名

我怀疑发出的令牌是错误的,可能是因为不正确的环境变量或类似的原因。

tnkciper

tnkciper2#

我认为有很多事情可能会有所帮助,我会提到其中的一些。希望你的问题能得到解决!
首先,尝试解析来自第一个axios post调用的JSON响应,并验证令牌是否被正确提取!

  1. const signupdata = {
  2. username: loginFields.email,
  3. email: loginFields.email,
  4. password: loginFields.password
  5. }
  6. axios.post('http://nextjs-headless-wordpress.local/wp-json/jwt-auth/v1/token', loginData)
  7. .then(res => {
  8. if (res.data && res.data.token) {
  9. console.log('authToken' + res.data.token);
  10. axios.post('http://nextjs-headless-wordpress.local/wp-json/wp/v2/users', signupdata, {
  11. headers: {
  12. 'Content-Type': 'application/x-www-form-urlencoded',
  13. 'Accept': 'application/json',
  14. 'Authorization': `Bearer ${res.data.token}`
  15. }
  16. }).then(response => {
  17. if (response.data) {
  18. console.log(response.data);
  19. }
  20. }).catch(error => {
  21. console.log('User Data response Error: ' + error);
  22. });
  23. }
  24. });

我想指出的是,我添加了对res.data.token的检查,以确保令牌实际存在于响应中。对这些事情有把握总是好的!
与其使用'Content-Type': 'application/x-www-form-urlencoded',为什么不在第二次axios post调用中尝试给予'Content-Type': 'application/json'头文件呢?它可能对你更好!
顺便说一句,当您进行第二次axios post调用时,不要忘记验证授权头是否正确设置。请记住,格式应该是'Authorization': 'Bearer ' + res.data.data.token'。这是一个重要的细节!
您可以做的另一件事是仔细检查令牌是否正确地附加到了头中。另外,花点时间确保端点'http://nextjs-headless-wordpress.local/wp-json/wp/v2/users'是正确的并且可以访问。仔细点总是好的!
你听说过这些流行的插件吗?JWT Authentication for WP REST APIWP JWT Authentication可能对您非常有用。只需确保您正确配置它们,并检查它们是否支持您正在使用的WordPress版本。
如果这些建议都不起作用,不要担心!您可以在WordPress安装中启用调试模式以获取更详细的错误消息。只需将以下行添加到wp-config.php文件中:

  1. define('WP_DEBUG', true);

祝你好运!

展开查看全部
ctrmrzij

ctrmrzij3#

您的Authorization头中似乎缺少一个空格。correct formatAuthorization: Bearer <token>,但您的代码生成Authorization: Bearer<token>。试试这个:

  1. axios.post( 'http://nextjs-headless-wordpress.local/wp-json/jwt-auth/v1/token',loginData)
  2. .then( res => {
  3. if(res.data){
  4. console.log('authToken: ' + res.data.data.token);
  5. //axios.defaults.headers.common['Authorization'] = res.data.data.token;
  6. axios.post('http://nextjs-headless-wordpress.local/wp-json/jwt-auth/v1/users/me', {
  7. headers: {
  8. 'Content-Type': 'application/x-www-form-urlencoded',
  9. 'Authorization': 'Bearer ' + res.data.data.token
  10. }
  11. }).then(response => {
  12. if (response.data) {
  13. console.log(response.data)
  14. }
  15. }).catch(error => {
  16. console.log('User Data response Error: ' + error)
  17. })
  18. }
  19. });
展开查看全部

相关问题