axios - Set headers based on url

Question

I'm using Axios interceptors to set some data and headers in different requests:

export default ({ $axios }) => {
  $axios.onRequest((req) => {
    if (req.url === 'https://identity.365werk.nl/api/login') {
      console.log('login')
      $axios.defaults.headers['Content-Type'] = 'application/json'
      $axios.defaults.headers.Accept = 'application/json'
    }

    if (req.url === 'https://userservice.365werk.nl/api/v0/auth/social') {
      $axios.defaults.headers['Content-Type'] = 'application/vnd.api+json'
      $axios.defaults.headers.Accept = 'application/vnd.api+json'
    }
  }
}

But the request headers of the response show:

If I add the headers outside the if statement:

export default ({ $axios }) => {
  $axios.defaults.headers['Content-Type'] = 'application/vnd.api+json'
  $axios.defaults.headers.Accept = 'application/vnd.api+json'
  $axios.onRequest((req) => {
    if (req.url === 'https://identity.365werk.nl/api/login') {
      console.log('login')
      $axios.defaults.headers['Content-Type'] = 'application/json'
      $axios.defaults.headers.Accept = 'application/json'
    }

    if (req.url === 'https://userservice.365werk.nl/api/v0/auth/social') {
      console.log('social')
    }
  }
}

But those headers are now also set for the /login url:

Which should just have json headers:

  $axios.defaults.headers['Content-Type'] = 'application/json'
  $axios.defaults.headers.Accept = 'application/json'

Any ideas how to conditionally (based on the url) set the headers of that request?

question from:https://stackoverflow.com/questions/66054292/set-headers-based-on-url

Answer 1

Waitting for answers