The issue I am having is when trying to make a POST request I keep getting "Unauthenticated" error. This issue is because the api_token is not being passed. If I make this request using PostMan it works.

Inside app.js I did a console.log(axios.defaults.headers.common) and that returns me the X-CSRF-Token & Authorization Bearer xxxx token.

Although, right before the axios call on the website (after submit), I added another console.log(axios.defaults.headers.common) and the only thing returned is Accept: 'application/json, text/plain, */*' which explains why the "Unauthenticated" error comes in, although I can't figure out why its correct in app.js but nothing get's passed after the fact. NOTE: I did not re-import axios in my component.

Inside my app.js file I have preset the headers for axios:

window.axios  = require('axios')

    let token = document.head.querySelector('meta[name="csrf-token"]');
    if (token) {
        window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
        window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
    }
    
    let api_token = document.head.querySelector('meta[name="api-token"]');
    if (api_token) {
        console.log('api_token.content',api_token.content )
        // THIS ABOVE RETURNS DATA CORRECTLY.
        window.axios.defaults.headers.common['Authorization'] = 'Bearer ' + api_token.content;
    }

Website - component after submit:

async submitForm () {
  console.log('window.axios.default.headers.common', axios.defaults.headers.common)
  // THIS ABOVE ^^ RETURNS EMPTY HEADERS
  const res = await axios.post('/api/product/add/validate', this.form)
}