Activities

chrislentz

chrislentz posted a new bug report

axios-module •

bug Current route.fullPath is out of date when called inside of an interceptor

Version

v5.6.0

Steps to reproduce

Make an axios API call after a route change after the initial SSR app load.

export default function ({ $axios, store, route, redirect }) {
  $axios.onError((error) => {
    if (error.response.status === 401) {
      store.commit('misc/setRedirect', route.fullPath);

      redirect('/sign-in');
    }
  });
}

What is expected ?

If I load the page on '/', then navigate to '/one' and make an axios request, the onError interceptor will return '/' via route.fullPath.

What is actually happening?

It should return '/one'.

Additional comments?

I was able to find a workaround by using app instead of route, but I wanted to report the bug.

Workaround: app.router.currentRoute.fullPath

perezd

perezd posted a new bug report

axios-module •

bug nuxt-axios module + axios v0.019 + retry-axios

Version

v5.6.0

Reproduction link

https://github.com/softonic/axios-retry/issues/59

Steps to reproduce

Attempt to enable retry:
https://axios.nuxtjs.org/options#retry

Cause a failed HTTP request, watch console output and see infinity retries at full speed.

What is expected ?

Retry 3 times as per the doc defaults.

What is actually happening?

infinite high speed retrying.

Additional comments?

OK so the problem is axios-retry is incompatible with axios 0.19:
https://github.com/softonic/axios-retry/issues/59

It looks like someone tried/is trying to fix it?
https://github.com/softonic/axios-retry/pull/82

The project hasn't seen any movement since January 24th (3.1.2).
The problem here, is that nuxt-axios is depending on ^0.19.0 and I guess there are no tests for this sort of integration regression.

The only solution is for me to pin axios to 0.18.1 in my own package.json.
This is messy, how should this module react to this problem? They are presenting a documented API that isn't behaving as documented..

federicovezzoli

federicovezzoli posted a new question

axios-module •

Usage with basic auth, problem with preflight OPTIONS

Hi, I need to fetch data inside the asyncData method from an API that has basic auth configured.

I've tried different ways of doing it, but really can't figure out a fully working way of doing it.

Right now my asyncData looks like this:

async asyncData({ $axios, $payloadURL, params, store, route }) {
 let projects = await $axios.$get('/projects/', {
      withCredentials: true,
      auth: {
        username: 'username',
        password: 'password'
      }
    })
    return { projects: projects }
  }

And my nuxt config:

axios: {
    baseURL: 'https://www.api.url',
    credentials: true,
    auth: {
      username: 'username',
      password: 'password'
    }
  },

The parameters inside the nuxt config seems to have no effect at all, and on route change, the preflight OPTIONS call seems to get sent without the auth headers, receiving a 401 error of Unauthorized.
Anyone can shed some light?

thanks!

monarkatfactly

monarkatfactly posted a new question

axios-module •

axios plugin not setting up the header in first API req send by app

plugins/axios.js
export default function ({ $axios }) { $axios.onRequest((config) => { $axios.setHeader('x-client', 'somedata'); console.log(config.url); console.log(config.headers.common.client); }); }

store/index.js
... async nuxtServerInit({ commit }) { const org = await this.$axios.$get('/api/v1/organizations') commit('setOrganisation', org[0]) } ...

pages/index.js
async asyncData({ $axios }) { const posts = await $axios.$get(encodeURI(${process.env.APIURI}/api/v1/posts)); const factchecks = await $axios.$get(encodeURI(${process.env.APIURI}/api/v1/factchecks)); ... }

When first time app gets load API req from nuxtServerInit is getting send without setting up the header and when I load any other page (like index.js) the first req inside asyncData is getting without setting up the header.

monarkatfactly

monarkatfactly posted a new question

axios-module •

axios plugin not setting up the header in first API req send by app

plugins/axios.js
export default function ({ $axios }) { $axios.onRequest((config) => { $axios.setHeader('x-client', 'somedata'); console.log(config.url); console.log(config.headers.common.client); }); }

store/index.js
... async nuxtServerInit({ commit }) { const org = await this.$axios.$get('/api/v1/organizations') commit('setOrganisation', org[0]) } ...

pages/index.js
async asyncData({ $axios }) { const posts = await $axios.$get('/api/v1/posts'); const factchecks = await $axios.$get('/api/v1/factchecks'); ... }

When first time app gets load API req from nuxtServerInit is getting send without setting up the header and when I load any other page (like index.js) the first req inside asyncData is getting without setting up the header.

you06

you06 posted a new feature request

axios-module •

idea An option to simple usage of axios by disable baseURL

What problem does this feature solve?

Currerently the baseURL should be set in nuxt build stage. After this stage, the baseURL is hard coded into generated files. And I cannot change them when starting the app.

What does the proposed changes look like?

I'm running nuxt app while use nginx as proxy, so the nuxt app listened 127.0.0.1 and a specific port. I want axios request without an immutable baseURL. For example the request URL like this /api/ping, then I do not need to consider about the baseURL issue.

Are there some solutions for achieving this simple usage of axios?

nachogarcia

nachogarcia posted a new feature request

axios-module •

idea Multiple instances

What problem does this feature solve?

At the moment, we have a global Axios instance with nice default configurations.

I need to have multiple instances with that same base configuration, but some extensions (baseUrl and headers).

I have this plugin to separate my domain services and it would be great to have the this feature

import ContentService from '@/infrastructure/services/ContentService'
import ClientService from '@/infrastructure/services/ClientService'

export default (ctx, inject) => {
  const httpClient = ctx.$axios

  const services = {
    content: new ContentService(httpClient),
    client: new ClientService(httpClient),
  }

  inject('services', services)
}

I've tried creating new instances with the provided defaults, but that way I don't get this module helpers

import axios from 'axios'
import ContentService from '@/infrastructure/services/ContentService'
import ClientService from '@/infrastructure/services/ClientService'

export default (ctx, inject) => {

  const services = {
    content: new ContentService(axios.create({ ...ctx.$axios.defaults, baseURL: '/contentApi' })),
    client: new ClientService(axios.create({ ...ctx.$axios.defaults, baseURL: '/clientApi' })),
  }

  inject('services', services)
}

What does the proposed changes look like?

Have a $axios.duplicate() maybe? Or a way to easily apply all the helpers and defaults to an instance

kissge

kissge posted a new bug report

axios-module •

bug Global error handling precedes local '.catch()', causing possible infinite loop

Version

v5.6.0

Reproduction link

https://codesandbox.io/embed/axios-global-error-handling-vct01?fontsize=14

Steps to reproduce

None

What is expected ?

Local error handling precedes and no alert is shown

What is actually happening?

Global error handling precedes and alert is shown

Additional comments?

When both a global error handling (via nuxt's plugin) and a local error handling (via '.catch()') are set, I would expect the former one works as 'default' error handler i.e. works only when there's no other ones handling the error instance.
However, current axios-module is not working as that.

(note: Some time before, a kind-of-dirty "hack" was known to monkey patch this problem (e.g. https://www.qcode.in/api-error-handling-in-vue-with-axios/), but this currently doesn't work because axios' behavior changed a year ago.
https://github.com/axios/axios/commit/5bfd2ea9f63e59efaef3f1a659b55bbb9778fce2#diff-91dcec0516f33811ee5fa71297160b3bR39 )

I think this is a design bug.
This also leads to infinite loop and consequent browser crash when some API call is invoked in global error handler, because that call cannot utilize '.catch()' mechanism, which is obviously undesirable.

SevenGuns

SevenGuns resolved the question #c283

axios-module •

axios 0.19.0 can't pass parameters through config

0.18.0 support, but 0.19.0 removed, so I can't send my own props through axios‘s config

SevenGuns

SevenGuns posted a new question

axios-module •

axios 0.19.0 can't pass parameters through config
kissge

kissge posted a new question

axios-module •

Global error handling precedes local ones; why?

I think I have a question about design.
When both global and local error handling is set, the local one won't be invoked and instead only the global one will.
Is there any good reason for this design?
I've come across to this question while thinking about the following situation: 1) in general, I want the error to be reported to the server so that I can find a potential bug. 2) but in some situations I want a different way to handle such errors, so I want to override the global behavior in that part.
For this scenario to work, the local error handler needs to precede over the global one.

Just to be clear, I mean this by the global error handler:

~/plugins/axios.ts:

export default ({$axios}) => {
    $axios.onError(error => reportToTheServer(error));
};

and this by the local error handler:

~/components/some-components.ts

async doSomething() {
    const result = await this.$axios.$get('/api/maybe-fails').catch(() => 'never mind');
}
paramono

paramono posted a new question

axios-module •

How to specify paramsSerializer for every axios request?

I would like to configure axios so that for every request, arrayFormat specified in paramsSerializer is 'repeat' instead of the default 'brackets' option.

This is how I achieve is:

  const response = await $axios.get(url, {
    params,
    paramsSerializer: function (params) {
      return qs.stringify(params, { arrayFormat: 'repeat' })
    },
  })

However, instead of specifying paramsSerializer function for every request, I would rather prefer specifying it once in config file.

I've read axios-module documentation, but it's still unclear to me how to properly achieve that. Where should I look?

Jasenkoo

Jasenkoo resolved the question #c280

axios-module •

Axios version > 5.3.2 ignoring custom config

Edit: Turns out, after investigation, that this is an Axios 0.19 reported issue. Last working version of this module with this functionality is 5.5.2.

Jasenkoo

Jasenkoo posted a new question

axios-module •

Axios version > 5.3.2 ignoring custom config

I don't know if this is an issue, or something needs to be configured.

case

$axios.$post('users/login', credentials, { handleToast: true })

Axios plugin extend

$axios.onResponse((response) => {
        if (response.config.handleToast) {
            // hadnle notification
        }
    });

In the previous versions I could see my custom prop in the response.config and when I updated to the latest version it is not visible anymore. Tried downgrading and at the v5.3.2 I managed to achieve it. Is someone else having the same problem? Any help is appreciated.

ozergul

ozergul posted a new question

axios-module •

asyncData and fetch requests are too slow.

Hello
Our production is uses Nuxt and Nuxt axios.

In our production is based on wordpress enpoints and our apis.
Both of requesting to these endpoints, answer from server is very slow. Almost 30 seconds. But in Postman there is no problem.
What is the problem?

4vrel

4vrel posted a new feature request

axios-module •

idea How to hangle CORS in the https://axios.nuxtjs.org/ tutorial

What problem does this feature solve?

Hello
I think in the tutorial https://axios.nuxtjs.org/usage the example should be
const ip = await this.$axios.$get('http://icanhazip.com').catch(error => console.log(error))
instead of just
const ip = await this.$axios.$get('http://icanhazip.com')

because if you encounter a bug ( for example a CORS error ), you will just land on a nuxt page "Network error" with no further information.

Also the doc should talk about how to handle CORS

What does the proposed changes look like?

const ip = await this.$axios.$get('http://icanhazip.com').catch(error => console.log(error))

instead of
const ip = await this.$axios.$get('http://icanhazip.com')
at
https://axios.nuxtjs.org/usage

4vrel

4vrel posted a new bug report

axios-module •

bug Very painfull CORS error

Version

v5.6.0

Reproduction link

https://jsfiddle.net/

Steps to reproduce

Install nuxt from the nuxt website instruction.
install axios during the setup
Then follow axios tutorial: https://axios.nuxtjs.org/usage

What is expected ?

To fetch the IP adress from the API

What is actually happening?

nuxt page: Network Error

Additional comments?

The "Network Error" page from nuxt is very frustating because it doesn't give much info.
It took me a while to figure out that it was a CORS error.
I don't understand why not everybody got this error, since I just followed the tutorial.

Also regarding this form, I don't understand what a "reproduction link" is and why is it mandatory

4vrel

4vrel posted a new question

axios-module •

I don't want to use CMTY

So I'm not using cmty form because I think its a very painfull form to fill. It require a mandatory "reprouction link" that I don't have.

yakou32

yakou32 posted a new question

axios-module •

Using env variables to setup the Base URL

I'm really not sure how to use the env variables within nuxt.config.js

I followed these explanations: https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code

.env :

VUE_APP_API_URL="https://myAPI.com"

nuxt.config.js :

axios: {
    // baseURL: "https://myAPI.com", //  this works
    baseURL: process.env.VUE_APP_API_URL // This doesn't
  },

I use Nuxt 2.9.2 and @nuxtjs/Axios 5.6.0

acrolink

acrolink posted a new bug report

axios-module •

bug $axios is undefined in async asyncData method in production (nuxt build && nuxt start)

Version

v5.6.0

Reproduction link

https://jsfiddle.net/v4nedh6L/

Steps to reproduce

The following code works perfect in development (nuxt script):

  async asyncData({ $axios, params }) {
    let response = await $axios.get(`/api/items`)
    return { entities: response.data.data }
  }

However, in production (nuxt build && nuxt start) I get this error:

 ERROR  Cannot read property 'get' of undefined                            18:31:39

  at asyncData (03b2f45fe1a8907386a4.js:1:0)
  at C (server.js:1:0)
  at Promise.all.h.map.n (server.js:1:0)
  at Array.map (<anonymous>)
  at e.default (server.js:1:0)

What is expected ?

Axios should work as it does in development.

What is actually happening?

Error