How to Send Authorization Header with Axios

Request Authorization header not set - React/Axios

Axios POST and GET have different method signatures.

axios.post(url[,data[, config]])

axios.get(url[,config])

So if you rewrite your GET method to the following

export const getWeights = async user => {
  try {
    const resp = await axios.get(
      baseUrl,
      setAuthHeader(user)
    )
    return resp.data
  } catch (error) {
    console.log(`error`, error)
  }
}

It will fix the issue. Also, if you need to pass the { userId: user.id } you could use something like this

export const getWeights = async user => {
  try {
    const resp = await axios.get(
      baseUrl,
      { params: { userId: user.id }, headers: { Authorization: `Bearer ${user.token}` }  }
    )
    return resp.data
  } catch (error) {
    console.log(`error`, error)
  }
}

This will result in a request with query params: http://example.com?userId=xxx.

Which may or may not be what you need, there is no way for me to tell without looking at the API. It depends on where the API is expecting to receive the userId parameter, query param, path variable, request body, etc.

Attach Authorization header for all axios requests

There are multiple ways to achieve this. Here, I have explained the two most common approaches.

1. You can use axios interceptors to intercept any requests and add authorization headers.

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    const token = store.getState().session.token;
    config.headers.Authorization =  token;
     
    return config;
});

2. From the documentation of axios you can see there is a mechanism available which allows you to set default header which will be sent with every request you make.

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

So in your case:

axios.defaults.headers.common['Authorization'] = store.getState().session.token;

If you want, you can create a self-executable function which will set authorization header itself when the token is present in the store.

(function() {
     String token = store.getState().session.token;
     if (token) {
         axios.defaults.headers.common['Authorization'] = token;
     } else {
         axios.defaults.headers.common['Authorization'] = null;
         /*if setting null does not remove `Authorization` header then try     
           delete axios.defaults.headers.common['Authorization'];
         */
     }
})();

Now you no longer need to attach token manually to every request. You can place the above function in the file which is guaranteed to be executed every time (e.g: File which contains the routes).

How to send Basic Auth with axios

There is an "auth" parameter for Basic Auth:

auth: {
  username: 'janedoe',
  password: 's00pers3cret'
}

Source/Docs: https://github.com/mzabriskie/axios

Example:

await axios.post(session_url, {}, {
  auth: {
    username: uname,
    password: pass
  }
});

Set authorization token dynamically to axios per request in nestjs

You can add it to the headers via the options parameter

const res = await axios.get('https://httpbin.org/get', {
  headers: {
    'Authorization': 'Bearer ey…'
  }
});

How to use token authorization with axios in react.js

I think the issue might be

"Token " + token

I think the rest API is looking for a bearer token as authorization so you might want to use

 axios.defaults.headers.common['Authorization'] = "Bearer " + token

---

Related Topics