OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Unable to use an axios plugin in nuxt

  • Thread starter Thread starter Konzy262
  • Start date Start date
K

Konzy262

Guest
I'm attempting to add an Axios plugin to Nuxt as described here, but it doesn't seem to work.

This is my plugins/axios.js file...

Code:
export default function({ $axios }) {
  console.log('Im in the axios plugin')
  $axios.defaults.baseURL = `https://localhost:5001/api`
  $axios.defaults.headers = {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
  $axios.onRequest((config) => {
    console.log('Making request to ' + config.url)
  })
}

This is my nuxt.config.js

Code:
plugins: ['~/plugins/axios'],
modules: ['@nuxtjs/axios']

And this is where I use Axios in a file called services/BookService.js:

Code:
import axios from 'axios'

export default {
  getBooks() {
    return axios.get('/Home')
  },
  getBooksFiltered(payload) {
    return axios.post('/Home/Filters', payload)
  }
}

I get the console.log('Im in the axios plugin') from within my plugin, but nothing else. $axios.onRequest doesn't appear to run, and the baseURL doesn't appear to be set correctly when getBooksFiltered is triggered. I get a 404 when it tried to hit the address http://localhost:3000/Home/Filters. As described in my plugin, the address should be https://localhost:5001/api/Home/Filters

I've also tried the following in my nuxt.config.js, but it doesn't work:

Code:
axios: {
  baseURL: 'https://localhost:5001/api'
}

Any ideas?

Edit

I've modified my services/BookService.js based on the suggestion below to the following...

Code:
export default {
  getBooks(axios) {
    console.log('Im in getBooks')
    return axios.get('/Home')
  }
}

My action request that makes my api call is the following....

Code:
import BookService from '~/services/BookService.js'

export const fetchBooks = (context) => {
  console.log('Im in fetchBooks action')
  return BookService.getBooks(this.$axios)
    .then((response) => {
      context.commit('SET_BOOKS', response.data.booksList)
    })
    .catch((error) => {
      console.log(error)
    })
}

And my method in my component that calls the actions...

Code:
async fetch({ store, error }) {
  try {
    console.log('Im in index -> fetch')
    await store.dispatch('fetchBooks')
  } catch (e) {
    error({
      statusCode: 503,
      message: 'Unable to fetch books at this time'
    })
  }
}

I'm aware that I may be mixing async/await with promises incorrectly but I don't believe it's the cause of this issue.

Console returns the following...

enter image description here

My network tab contains a single request to http://localhost:3000/ which seems incorrect. It should be https://localhost:5001/api/Home based on the plugin and the address specified in the action. It is also never entering $axios.onRequest

enter image description here

<p>I'm attempting to add an Axios plugin to Nuxt as described <a href="https://axios.nuxtjs.org/extend" rel="nofollow noreferrer">here</a>, but it doesn't seem to work.</p>

<p>This is my <code>plugins/axios.js</code> file...</p>

<pre class="lang-js prettyprint-override"><code>export default function({ $axios }) {
console.log('Im in the axios plugin')
$axios.defaults.baseURL = `https://localhost:5001/api`
$axios.defaults.headers = {
Accept: 'application/json',
'Content-Type': 'application/json'
}
$axios.onRequest((config) => {
console.log('Making request to ' + config.url)
})
}
</code></pre>

<p>This is my <code>nuxt.config.js</code></p>

<pre class="lang-js prettyprint-override"><code>plugins: ['~/plugins/axios'],
modules: ['@nuxtjs/axios']
</code></pre>

<p>And this is where I use Axios in a file called <code>services/BookService.js</code>:</p>

<pre class="lang-js prettyprint-override"><code>import axios from 'axios'

export default {
getBooks() {
return axios.get('/Home')
},
getBooksFiltered(payload) {
return axios.post('/Home/Filters', payload)
}
}
</code></pre>

<p>I get the <code>console.log('Im in the axios plugin')</code> from within my plugin, but nothing else. <code>$axios.onRequest</code> doesn't appear to run, and the <code>baseURL</code> doesn't appear to be set correctly when <code>getBooksFiltered</code> is triggered. I get a <code>404</code> when it tried to hit the address <code>http://localhost:3000/Home/Filters</code>. As described in my plugin, the address should be <code>https://localhost:5001/api/Home/Filters</code></p>

<p>I've also tried the following in my <code>nuxt.config.js</code>, but it doesn't work:</p>

<pre class="lang-js prettyprint-override"><code>axios: {
baseURL: 'https://localhost:5001/api'
}
</code></pre>

<p>Any ideas?</p>

<p><strong>Edit</strong></p>

<p>I've modified my <code>services/BookService.js</code> based on the suggestion below to the following...</p>

<pre><code>export default {
getBooks(axios) {
console.log('Im in getBooks')
return axios.get('/Home')
}
}
</code></pre>

<p>My action request that makes my api call is the following....</p>

<pre><code>import BookService from '~/services/BookService.js'

export const fetchBooks = (context) => {
console.log('Im in fetchBooks action')
return BookService.getBooks(this.$axios)
.then((response) => {
context.commit('SET_BOOKS', response.data.booksList)
})
.catch((error) => {
console.log(error)
})
}
</code></pre>

<p>And my method in my component that calls the actions...</p>

<pre><code>async fetch({ store, error }) {
try {
console.log('Im in index -> fetch')
await store.dispatch('fetchBooks')
} catch (e) {
error({
statusCode: 503,
message: 'Unable to fetch books at this time'
})
}
}
</code></pre>

<p>I'm aware that I may be mixing async/await with promises incorrectly but I don't believe it's the cause of this issue.</p>

<p>Console returns the following...</p>

<p><a href="https://i.sstatic.net/E2xK1.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/E2xK1.png" alt="enter image description here"></a></p>

<p>My network tab contains a single request to <code>http://localhost:3000/</code> which seems incorrect. It should be <code>https://localhost:5001/api/Home</code> based on the plugin and the address specified in the action. It is also never entering <code>$axios.onRequest</code></p>

<p><a href="https://i.sstatic.net/tKx8w.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/tKx8w.png" alt="enter image description here"></a></p>
 

Latest posts

Top