title: How to properly set axios default headers
body: <p>I'm using reactjs for my project but I have one issue, in config.js file where i set my global axios configurations, I'm setting default headers for axios requests but when i make axios request it does not send those headers in requests.</p>
  
  <p>config.js</p>
  
  <pre><code>import axios from 'axios';
  
  const instance = axios.create({
      baseURL: 'URL/api'
  });
  
  export const setAuthToken = (token) =&gt; {
      if (token) {
          // Apply to every request
          instance.defaults.headers.common['Authorization'] = 'Bearer ' + token;
      } else {
          // Delete auth header
          delete instance.defaults.headers.common['Authorization'];
      }
  };
  
  export default instance;
  </code></pre>
  
  <p>Login.js</p>
  
  <pre><code>import axios from '../../../config';
  import { setAuthToken } from '../../../config';
  axios
              .post('/auth/signin', {
                  username: email,
                  password: password
              })
              .then((res) =&gt; {
                  setCurrentUser(res.data);
                  setAuthToken(res.data.accessToken);
                  setLoading(false);
              })
              .catch((err) =&gt; {
                  console.log(err);
                  setLoading(false);
                  setError(true);
              });
  </code></pre>