CODEWITHSUNDEEP
reactjs
Tony
Tony

Reputation: 77

How to handle authorization headers on API call in React?

I'm trying to make a GET request to retrieve Total balance for a payment summary. I get a 401 unauthorized error on the console.

const getPay = () => {
    Axios({
        method: "GET",
        url: `apiEndpoint/${variable}`,
        headers: {
            'Content-Type': 'application/json',
            'x-access-token': "Available upon request"
          }
       
      })
        .then((response) => {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
          
        });
   }

useEffect(() => {
  getPay()

}, [])

The API docs states "Every request to any of the endpoints must contain the headers." The headers above were stated but I get an error 401(Unauthorized). please how do I go about this?

Upvotes: 0

Views: 912

Answers (1)

Sudip Shrestha
Sudip Shrestha

Reputation: 442

Just add Authorization in your headers

const getPay = () => {
    Axios({
        method: "GET",
        url: `apiEndpoint/${variable}`,
        headers: {
            'Content-Type': 'application/json',
            'x-access-token': "Available upon request",
             Authorization: `Bearer YOUR_TOKEN`
          }
       
      })
        .then((response) => {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
          
        });
   }

useEffect(() => {
  getPay()

}, [])

Also, It is better to implement axios interceptors so that you dont have to pass headers in each call

// Request interceptor
API.interceptors.request.use(
  async axiosConfig => {
    const token = await getToken()
    if (token && axiosConfig.headers) {
      axiosConfig.headers.Authorization = `Bearer ${token}`
    }
    return axiosConfig
  },
  error => Promise.reject(error),
)

Upvotes: 1

Related Questions