How to set header and options in axios?

Shorthand with POST

Sometimes you want a quick getaway. Axios lets you make a post request with minimum fuss:

axios.post('/getawayCar', { speed: 'Fast, very fast' }, {
  headers: { Authorization: `Bearer ${keysToSuccess}` }, // 🗝️ Keys to success
});


Remember to replace 'keysToSuccess' with your actual token or you won't go far.

Going global with headers

Sometimes, you need to go big and go global. In these cases, set your headers universally with axios.defaults.

axios.defaults.headers.common['Authorization'] = `Bearer ${myToken}`; // This time we're saving the world


Enter the interceptor

Axios interceptors give you more finesse, rerouting requests and responses before they reach their destination. With interceptors, you can set your headers on every request with a single statement:

axios.interceptors.request.use(config => {
  config.headers.Authorization =  `Bearer ${localStorage.getItem('token')}`;
  return config; // If there's nothing else, at least there's hope. Off you go!
});


Taming the instance

Make Axios even more flexible by creating your own instance. This lets you customize the default settings:

const superAxios = axios.create({
  baseURL: 'https://good-guy-hq.example.com',
  headers: { 'X-Secret-Code': `s3cr3t` } // Have the eyes to see the truth
});


With axios.create(), you've got your very own Axios ready for action!

Handling request with config objects

For better control, use a config object defining your HTTP method, url, params, and headers. Remember the params key handles your query parameters nicely.

axios({
  method: 'get',
  url: '/search/forTruth',
  params: { quest: 'Endeavour' },
  headers: { 'Accept': 'application/json' }
});


Addressing common oversights

Preventing misfires: Config structures and endpoint accuracy

Check your config structure and endpoint accuracy - small oversights can lead to big disappointments. The headers object is key-value based, treat it well!

const config = {
  method: 'get',
  url: '/users/all', //  Make sure you have no loose ends!
  headers: { 'Authorization': `${token}` }
};

axios(config).then(response => console.log(response.data)); 


Sliding across ice: HTTP verbs and configuration

Remember to specify your HTTP method accurately, and maintain an organized structure for your configuration object:

axios({
  method: 'put',
  url: '/user/123',
  data: { name: 'Jon Snow' },
  headers: { Authorization: `Bearer ${youKnowNothing}` }
});


Easing with variables

Use variables for any sensitive tokens, not only for enhancing flexibility but ensuring top-tier security.

const authToken = fetchTokenFromTheHighTower(); 
axios.defaults.headers.common['Authorization'] = `Bearer ${authToken}`;


Congratulations, the secrets of Axios headers and options are now yours to wield! Go forth and code, my friend. 👨‍💻