Problem with axios header in nuxt.js

#vue #nuxt #axios #discuss

Hello,

I'm working on a project using nuxt.js that other developers have already worked on.
I don't know much about nuxt.js and I'm having a problem that I can't solve.
When I do an npm run build then npm run start the application works normally, but when I do an npm run dev I get errors:

TypeError: Cannot read properties of undefined (reading 'Authorization')                         
TypeError: Cannot read properties of undefined (reading 'status')                                

 ERROR  Cannot read properties of undefined (reading 'status')                                           

  at server.js:13024:24
  at server.js:455:56
  at async asyncData (pages/landing/students.js:2156:35)
  at async Promise.all (index 0)
  at async Promise.all (index 0)
  at async module.exports../.nuxt/server.js.__webpack_exports__.default (server.js:5494:22)

Moreover if I remove the headers from the axios requests, there is no more error and the application works when I do npm run dev.

Here is a portion of the code that is causing the problem :

async asyncData({app, params, $axios, $config: { baseURL } }) {
        const res = await $axios.$get(`/api/student`, {
            headers: {
              'Accept-Language': app.i18n.locale,
            },
        })
        .then((res) => {
          console.log(res)
          return res
        })
        .catch((err) => {
          console.error(err)
        });

        return { res }
    }

Deploy with ease. Manage efficiently. Scale faster.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started