Debug.vue

<template>
  <b-container>
    <h1>Debugging page</h1>
    <p>
      This page is only used for debugging purposes and should be removed from
      a productive version.
    </p>
    <p>
      Here we go: <b-button size="lg" variant="warning" @click="debug()">Debug now!</b-button>
    </p>
    Response headers: <br />
    <div style="border: 1px dotted #aaa">
      {{ response.headers }}
    </div>
    Response data: <br />
    <div style="border: 1px dotted #aaa">
      {{ response.data }}
    </div>
  </b-container>
</template>

<script>
import axios from 'axios'

function debugErrorRequest (data, headers) {
  console.log('Request headers:')
  console.log(headers)
  console.log('Request data:')
  console.log(data)
  return data
}

function debugErrorResponse (data) {
  console.log('Response data:')
  console.log(data)
  return data
}

export default {
  data () {
    return {
      response: ''
    }
  },
  methods: {
    debug () {
      axios.get(process.env.VUE_APP_API_STEERING + 'users/', {
        withCredentials: true,
        transformRequest: [debugErrorRequest],
        transformResponse: [debugErrorResponse]
      }).then(response => {
        this.response = response
        console.log(response)
      }).catch(error => {
        console.log(error)
        alert(error)
      })
    }
  }
}
</script>

<style scoped>
p {
  text-align: left;
}
</style>