'"Gets unauthorized error after submitting correct token"

I just try to hit the API when like and dislike button is clicked , but I get unauthorized error after passing the authorization header. What is the solution of this problem. There is post where all users can like or dislike. There is only unauthorized error, everything is true. This is the screenshot of where the action is written.
This is the screenshot where the error is displayed.

`JavaScript code

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import {Link} from 'react-router-dom';
import { deltePost, addLike, deleteLike } from 
 class PostItem extends Component {
    onDelteClick(postId)
   {
    this.props.deltePost(postId);
   }
   onLikeClick(id)
   {
     this.props.addLike(id);
   }
   onunLikeClick(id)
   {
     this.props.deleteLike(id);
   }
  
    render() {
        const {post,auth,showActions}=this.props;
        return (
     <section className="container">
   <div className="posts">
        <div className="post bg-white p-1 my-1">
          <div>
            <a href="profile.html">
              <img
                className="round-img"
                src="//www.gravatar.com/avatar/05434e5d678bc30625550497804f6d0e?s=200&r=pg&d=mm"
                alt=""
              />
              <h4>{post.name}</h4>
            </a>
          </div>
          <div>
            <p className="my-1">
             {post.text}
            </p>
             <p className="post-date">
               {post.date}
            </p>
            
            {showActions ?(<span>
              <button onClick={this.onLikeClick.bind(this, post._id)} type="button"  className="btn btn-light">
              <i className="fas fa-thumbs-up"></i>
              <span>{post.likes.length}</span>
            </button>
            <button onClick={this.onunLikeClick.bind(this, post._id)} type="button" className="btn btn-light">
              <i className="fas fa-thumbs-down"></i>
            </button>
            <Link to={`/post/${post._id}`} className="btn btn-primary">
              Comments <span className='comment-count'>{post.comments.length}</span>
            </Link>
            {post.user === auth.user.id ?(
  <button      
  type="button"
  onClick={this.onDelteClick.bind(this,post._id)}
  className="btn btn-danger"
>
  <i className="fas fa-times"></i>
</button>
            ):null}
          
            </span>) :null}
          </div>
        </div></div>
 </section>
           
        )
    }
}
PostItem.defaultProps={
  showActions:true
}
PostItem.propTypes={
    deltePost:PropTypes.func.isRequired,
    deleteLike:PropTypes.func.isRequired,
    addLike:PropTypes.func.isRequired,
    post:PropTypes.object.isRequired,
    auth:PropTypes.object.isRequired
}
const mapStateToProps= state =>({
    auth:state.auth
})
export default connect(mapStateToProps,{deltePost,addLike,deleteLike})(PostItem)
`


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source