Activities

sambowler

sambowler posted a new bug report

axios-module •

bug "Property 'get' does not exist on type 'Action<IRootState, IRootState>'." when using `this.$axios` in store action

Version

v5.1.0

Reproduction link

https://codesandbox.io/s/14zzr032xj

Steps to reproduce

I might just be missing some configuration but I'm unable to get my store to properly pick up the types for this.$axios in Vuex store actions. Things I've tried:

  • Adding "import '@nuxtjs/axios';" to an index.d.ts file
  • Adding "@nuxtjs/axios" to the "types" array in tsconfig.json
  • Directly copying and pasting the type definition from "vuex.d.ts" in to an index.d.ts file in my project

This is all using the actions type definition found in the Nuxt example here: https://nuxtjs.org/examples/typescript-vuex (and in use in the codesandbox link provided -- see store/index.ts).

If I remove that, I get a "Property '$axios' does not exist on type" error instead.

What is expected ?

Types are picked up correctly and I'm able to use this.$axios methods.

What is actually happening?

Types are not correctly picked up and builds subsequently fail.

Ellean

Ellean posted a new question

axios-module •

CAN’T use axios-module in asyncData

I used just like the official demo in https://axios.nuxtjs.org/usage#component

But nothing happened.

I tried to use axios do the same thing and everything is just fine.

Here is my code:

async asyncData({ $axios }) {
let data = await $axios.$get("/branch/list");
return {
branchList: data
};
}

It works fine in methods , mouted() ,etc.

I use @nuxtjs/axios 5.4.1

simon-zhangmuye

simon-zhangmuye posted a new question

axios-module •

Question for mutation status in vue-devtools

Hi mate,

I am a fresh man to Vue and NUXT.
I find an interesting point.
Could you explain it?
3.png

1.png

2.png

I don't know why mutation changes cann't be seen from vue-devtools when I write code outside onRequest.
I mean the mutations still happen and vuex store these data, but when I use some plugins like vue-persist or vue-persistedstate to persist my vuex into localstorage. It doesn't work when I put code outside.

Wait for you reply and thank you very much.

wooooodward

wooooodward posted a new bug report

axios-module •

bug If vuex action triggers interceptor the returned value is undefined instead of the actual interceptor response

Version

5.4.1

Reproduction link

https://codesandbox.io/s/moywxno29p

Steps to reproduce

Load the codesandbox link then click Go to Posts. On page load here's what happens:

  1. Call vuex action using the fetch method
  2. Action triggers 400 level error
  3. Intercept error using onResponseError in plugin
  4. Retry the request after performing some other actions

What is expected ?

The interceptor successfully returns some data and the action continues, committing that data to the store.

What is actually happening?

Despite the interceptor having a successful retry and returning valid data, the axios call in the store action returns undefined.

In other words await.$axios.$post(...) triggers an error which is successfully intercepted but is undefined.

It should be equal to the value returned by the interceptor.

wooooodward

wooooodward posted a new question

axios-module •

Intercept 401 in onError, refresh token, retry request then save to Vuex store

I'm trying to catch 401 errors, refresh JWT token then retry the original request. Here's the code in @/plugins/axios which is successfully refreshing the token and retrying the request but the original request isn't saved to the store.

Should I be going about this in a different way?

$axios.onError(error => {
  if (error.response.status === 401 && store.state.auth.token) {
    if (error.response.config.url.includes('/token/refresh/')) {
      // refresh token not valid - log user out
      store.dispatch('auth/logout')
      throw error
    } else {
      // refresh access token
      const p = store.dispatch('auth/refreshToken', { req })
      p.then(
        response => {
          // retry original request
          console.log('retrying')
          return $axios.$request({
            method: error.response.config.method,
            url: error.response.config.url,
            data: error.response.config.data
          })
        },
        error => {
          // refresh failed - reject original request
          throw error
        }
      )
    }
  }
  // if error not 401 just reject as is
  throw error
})
mrleblanc101

mrleblanc101 posted a new question

axios-module •

Axios-module with multiple API endpoint

Hi,
In our app, we use multiple api which need different default config so we can't use this module.
We use axios/axios and create multiple instance with their own config.
Is it possible to do something like this with axios-module ?

everttrollip

everttrollip posted a new question

axios-module •

Port not working in baseURL

I am struggling to understand why the port 443 is not being included in my baseURL string everytime I am making a login request. I have set the APIURL environment variable in my .env file to be "APIURL=https://blahhh:443/staging", and everytime I view the request in the network panel of my chrome browser, the requested URL is without the port number: "Request URL: https://blahhh/staging/api/auth/login"

Could someone help me to understand what I am missing here?

I have attached a couple of screenshots to explain.

Screenshot 2019-04-03 at 16.24.37.png
Screenshot 2019-04-03 at 16.23.31.png
Screenshot 2019-04-03 at 16.25.37.png

d4rkr3pt0r

d4rkr3pt0r posted a new question

axios-module •

Why axios is sending extra headers by itself?

Hi,
I'm sending POST request to my Laravel app. I have 2 cookies which was set before by Laravel. So to send cookies, I've enabled credentials in config file. Now the problem is axios is sending one extra header which prevent request from sending (just preflight is sending).

Here are 2 cookie (truncate for better reading):

XSRF-TOKEN    eyJpdiI6IklVSFF5ckNNS...    localhost   /   2019-04-02T15:36:43.506Z    256             
myapp_session    eyJpdiI6IkVCVW10QU...     localhost  /  2019-04-02T15:36:43.506Z    264

Here are headers which axios send (additional headers is not mentioned):

X-XSRF-TOKEN: eyJpdiI6IklVSFF5ckNNS...
Cookie: XSRF-TOKEN=eyJpdiI6IklVSFF5ckNNS...; myapp_session=eyJpdiI6IkVCVW10QU...; auth.strategy=local

As you can see the first header is the one that is making the problem.
Any help would be greatly appreciated.

SHxKM

SHxKM posted a new question

axios-module •

Axios behaviour (client-side) with proxy enabled

I have to say I’m completely puzzled by the way Nuxtjs/axios is behaving.

I have two separate apps, front end (Nuxt.js) and backend (Django REST API).

The backend root endpoint is backend-url.com/api/, and my relevant endpoint is backend-url.com/api/todos/.

frontend-url.com index page is set to fetch() data from backend-url.com/api/todos/ on page load.

Here’s what’s happening: when I load frontend-url.com homepage, the app loads nicely and items are fetched, but if I navigate to frontend-url.com/about by clicking on nuxtjs-link and then click a nuxtjs-link back to /, I get a server error.

It seems that turning proxy on causes this behavior. In my logs, I see that on initial page load the API app is getting pinged, while in the navigation scenario frontend's axios is trying to reach for 'todos' instead of 'api/todos/'.

I have the following in my frontend index fetch():

    async fetch({ store, params }) {
      console.log("fetch is being called")
      await store.dispatch('todo/getToDos')
    }

And its definition in the store:

async getToDos(context) {
        const res = await this.$axios.get('/todos/')
        console.log(res)
        if (!res.error) {
            context.commit("SET_TODOS", res.data)
        } else {
            context.commit("SET_TODOS", [])
        }
    }

My Nuxt.config.js relevant section, I've modified and played with the different variables and several different combinations with no success:

axios: {
    proxy: true,
    progress: true,
    debug: true,
    baseURL: process.env.PRODUCTION === "true" ? process.env.HEROKU_BACKEND_API_URL : process.env.LOCAL_API_URL,
    baseBrowserURL: process.env.PRODUCTION === "true" ? process.env.HEROKU_BACKEND_API_URL : process.env.LOCAL_API_URL
  },
  proxy: {
    '/api/*': { target: process.env.PRODUCTION === "true" ? process.env.HEROKU_BACKEND_API_URL : process.env.LOCAL_API_URL, pathRewrite: { '^/api': '' } }
  }

Again, this all works on the first page-load, but never from within the client side navigation.

What's causing this? What am I misunderstanding in the settings? Of course I don't want to prepend 'api/' to all my axios calls.

hwmb

hwmb posted a new question

axios-module •

Using axios without auth headers

Is it possible to make an axios request without using auth module headers/token?

hwmb

hwmb posted a new question

axios-module •

Using axios without auth headers

Is it possible to make an axios request without using auth module headers/token?

sdr0x07b6

sdr0x07b6 posted a new bug report

axios-module •

bug context.route is not updated

Version

v5.4.1

Reproduction link

https://github.com/sdr0x07b6/route.git

Steps to reproduce

git clone [email protected]:sdr0x07b6/route.git
cd route && yarn && yarn dev

Transition while looking at Developer Tools console.

What is expected ?

Just as route is updated in asyncData, it should be updated in interrupts as well.

What is actually happening?

The route changes normally in asyncData() of each page every time the page transits.
However, the interrupted request does not change route regardless of where it is transitioned.
It does not change from the route at the time of SSR.

Access to /
console.log(route) --> { path: 'index', ... }

Next, transition /users
console.log(route) --> { path: 'index', ... } // Not updated

Next, transition /products
console.log(route) --> { path: 'index', ... } // Not updated

And, from is always undefined.

Additional comments?

Access to Index:
[in asyncData] route.path:/ from.path:null
[in $axios.onRequest] route.path:/ from.path:null

Next, transition to Users:
[in asyncData] route.path:/users from.path:/
[in $axios.onRequest] route.path:/ from.path:null

Next, transition to Products:
[in asyncData] route.path:/products from.path:/users
[in $axios.onRequest] route.path:/ from.path:null

Akhail

Akhail posted a new question

axios-module •

Dont work typescript declaration

DeepinScreenshot_select-area_20190322141712.png

daukadolt

daukadolt posted a new question

axios-module •

Session changes don't work when backend is called at middleware but works at calls from the page

I've posted my question using cmty.app, but scrolling through the questions gives no hope as almost none has been resolved or at least commented in the last 5 months, so I'll give it a try by posting here.

When an Express.js endpoint is POST-called from the middleware by using context.app.$axios.post(theURL) the endpoint modifies a key-value pair of an existing object in request.session, but the changes do not persist. Same POST addressing from the page component using this.$axios.post(theURL) does result in a desired change in the session object. Searching through issues and the documentation of both https://nuxtjs.org/api/context/ and the axios module I didn't find anything related to my problem. What is the issue caused by? Is it because of the server-side-rendering? While debugging I've been logging session ID's on the backend and the SSR calls from the middleware had the same session IDs as calls from the already rendered component that I've mentioned above, so I think the SSR may not be the cause.

daukadolt

daukadolt posted a new question

axios-module •

Session changes don't work when backend is called at middleware but works at calls from the page

When an Express.js endpoint is POST-called from the middleware by using context.app.$axios.post(theURL) the endpoint modifies a key-value pair of an existing object in request.session, but the changes do not persist. Same POST addressing from the page component using this.$axios.post(theURL) does result in a desired change in the session object. Searching through issues and the documentation of both https://nuxtjs.org/api/context/ and the axios module I didn't find anything related to my problem. What is the issue caused by? Is it because of the server-side-rendering? While debugging I've been logging session ID's on the backend and the SSR calls from the middleware had the same session IDs as calls from the already rendered component that I've mentioned above, so I think the SSR may not be the cause.

rothskeller

rothskeller posted a new bug report

axios-module •

bug Bad issue tracking link

Version

v5.1.0

Reproduction link

http://not-applicable

Steps to reproduce

Go to https://github.com/nuxt-community/axios-module/issues/new.

What is expected ?

Issue submission template gives URL where new issue can be submitted.

What is actually happening?

Issue submission template gives a broken URL.

rothskeller

rothskeller posted a new question

axios-module •

Wrong baseURL in SPA mode

I have developed a large Nuxt app that uses the Axios module, on the client, to get data from the server, using relative URLs in all requests. This works fine in development, because of proxy settings. But when I build the app for production (in SPA mode), the client side always tries to send its requests to http://localhost:3000/. I am not sure how to get it to stop this. I do not want to hard-code the URL of the actual server in an environment variable or other config; I just want it to send its requests to the server from which the page was loaded. This is default behavior for axios, but it seems that the Nuxt axios-module is forcing a setting of baseURL when I don't actually want one. How can I get axios-module to simply send requests with the relative URL I give it, without trying to add any base URL?

rothskeller

rothskeller posted a new question

axios-module •

New issue URL is broken

Your issue template says to submit issues through https://nuxtjs.cmty.io/issues/new, but that URL doesn't exist.

xhw994

xhw994 posted a new bug report

axios-module •

bug In plugin, when setting token stored in vuex, axios reads valid string as null

Version

v5.1.0

Reproduction link

https://jsfiddle.net/hrg94qye/

Steps to reproduce

With only nuxt and nuxt/axios, I added the code shown in JSFiddle to plugin/axios.js.
Although I can log the correct value from the console, $axios.setToken and $axios.setHeader ig

What is expected ?

axios adds the correct authorization header value:
'Authorization': 'Bearer ${token}'

What is actually happening?

setToken will do nothing unless passing in an explicit string value
setHeader will add 'Authorization': 'Bearer '

kaboume

kaboume posted a new question

axios-module •

How to use $axios in another plugin

Hi,
I read that $axios can be used in a custom plugin but I don't know how to do it ?
Have you got an example ?
Thanks in advance