title: Axios doesn't send headers from request interceptors
body: <p>On my front-end I have this <code>Axios</code> code:</p>
  <pre class="lang-js prettyprint-override"><code>import axios from &quot;axios&quot;;
  process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'
  
  const apiUrl = process.server ? `${process.env.FRONT}api/` : '/api/';
  
  const api = axios.create({
    baseURL: apiUrl,
    headers: {
      'Content-Type': 'application/json'
    }
  })
  
  api.interceptors.request.use(function (config) {
    const token = localStorage.getItem('token')
    if (token) {
      config.headers.common['Authorization'] = 'Bearer ' + token
    }
    return config;
  }, function (error) {
    return Promise.reject(error);
  });
  
  export const login = async (payload) =&gt; {
    const { data } = await api.post(`login`, payload)
    return data
  }
  </code></pre>
  <p>What this code does is just set some headers with token. Then, this request goes to front-end server:</p>
  <pre class="lang-js prettyprint-override"><code>router.post(`/login`, async (req, res) =&gt; {
    try {
      const data = await api.post('/login', req.body)
      res.json(data.data)
    } catch (e) {
      res.status(e.response.status).json(e.response.data)
    }
  })
  </code></pre>
  <p>If you do <code>console.log(req.headers)</code> here, it's gonna be okay, headers will look like this:</p>
  <pre><code>req.headers {
    accept: 'application/json, text/plain, */*',
    'content-type': 'application/json',
    host: 'localhost:8010',
    connection: 'keep-alive',
    'content-length': '898',
    authorization: 'Bearer ...token...',
    'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36',
  ...
  }
  </code></pre>
  <p>And here is the problem, after that, when request goes to back end, it's captured by middleware <code>auth</code>:</p>
  <p><code>router.post('/login', auth, accountController.login)</code></p>
  <p>This is how this middleware looks like:</p>
  <pre class="lang-js prettyprint-override"><code>import * as jwtService from './../services/jwtService';
  import { Request, Response } from 'express';
  import { CommonResponse } from &quot;../responses/response&quot;;
  
  export default async (req: Request, res: Response, next: any) =&gt; {
    try {
      if (req.headers.authorization) {
        const user = await jwtService.getUser(req.headers.authorization.split(' ')[1])
        if (user) next();
        else return CommonResponse.common.unauthorized({ res })
      } else {
        return CommonResponse.common.unauthorized({ res })
      }
    } catch (e) {
      return CommonResponse.common.unauthorized({res});
    }
  }
  </code></pre>
  <p>And here is the problem, if you do <code>console.log(req.headers)</code> here you'll see, this:</p>
  <pre><code>{
    accept: 'application/json, text/plain, */*',
    'content-type': 'application/json',
    'user-agent': 'axios/0.26.0',
    'content-length': '898',
    host: 'localhost:3000',
    connection: 'close'
  }
  </code></pre>
  <p>What happened to my headers?</p>
  <p>By the way, if on front end server you do this:</p>
  <p><code>const data = await api.post('/login', req.body, {headers: req.headers})</code></p>
  <p>This is going to work, but still, what happened? Is this how interceptors should work?</p>