Activities

saidulhaqueriaz

saidulhaqueriaz posted a new question

axios-module •

Progress Bar not working while making requests

As per documentation, progress bar is integrated with Nuxt.js Progressbar while making requests but i'm having issues with that. The progress bar is not visible while making GET / POST request. Here is my code bellow -

Method:

async fetchSomething() {
const ip = await this.$axios.$get("http://icanhazip.com");
console.log(ip);
}

I'm calling this method via a button. So the progress should visible when i call this method from an action button. But it's not working.

Version I'm using -

@nuxtjs/axios: 5.10.3
nuxt: 2.12.2

Note: I have changed the color of progress bar, height from nuxt.config.js

Dean-Christian-Armada

Dean-Christian-Armada posted a new question

axios-module •

Cancelling promise in response interceptor

Basically, my question is the exact one here https://github.com/axios/axios/issues/583. It can be done via throw new axios.Cancel('Operation canceled by the user.');.. But how can I dod this in nuxt axios module?? I can not see it in the document and I tried $axios.Cancel('Error') but returned $axios.Cancel is not a constructor

DudaevAR

DudaevAR posted a new feature request

axios-module •

idea Release 5.10.4

What problem does this feature solve?

Please make a new release 5.10.4 with the last commit 'feat(types): add typings to axios config in nuxt.config (#357)'.
I found issue in @nuxt/auth v5. And new types are needed for a beautiful fix.

PR with @nuxt/auth fix:
https://github.com/nuxt-community/auth-module/pull/685

SomethingNew71

SomethingNew71 posted a new bug report

axios-module •

bug Npm Audit Failure - High Sev http-proxy

Version

v5.10.3

Reproduction link

https://anyproject.com

Steps to reproduce

  1. npm i @nuxtjs/axios
  2. npm audit failure

What is expected ?

No audit failure

What is actually happening?

npm audit is delivering an error indicating a Denial of Service Vulnerability.

Additional comments?

Screen Shot 2020-05-15 at 8.44.17 AM.png

goraSi

goraSi posted a new bug report

axios-module •

bug Proxy on fecth method and fetchOnServer

Version

v5.10.3

Reproduction link

https://jsfiddle.net/nf6q2jv9/

Steps to reproduce

Step

What is expected ?

Axios call should work with proxy module on server and client. Setting fetchOnServer=false on fetch method, works OK.

What is actually happening?

When using axios call on fetch method with fetchOnServer=true, proxy path rewrite is not working. Looks like proxy module is not respected at all.

Additional comments?

Nuxt config is included in repro link.

export default {
  fetchOnServer: true,
  async fetch() {
    try {
      this.client = await this.$axios.$get('/api/clients/${this.$route.params.id}')
    } catch (error) {
      this.$nuxt.error(error.message)
    }
  }
}
FreekVR

FreekVR posted a new bug report

axios-module •

bug Broken error handling when calling an unreachable address using a custom https agent

Version

v5.10.3

Reproduction link

https://codesandbox.io/s/eloquent-mountain-uh6f8?file=/plugins/axios.js

Steps to reproduce

  • Add a custom nuxt plugin to ignore SSL errors (eg. local development setup) as per https://github.com/nuxt-community/axios-module/issues/31
  • Call an URL that doesn't work/exist (eg. you forgot to spin up a local backend docker setup or something on the network is broken)
  • Reload the page

What is expected ?

Normal error handling is triggered

What is actually happening?

  • Maximum call stack size exceeded
  • Lots of stringify errors (trying to stringify an axios object?)
ichuprov

ichuprov posted a new question

axios-module •

Error TypeError: Cannot read property 'replace' of undefined

Not sure if this is a bug or not, but in the Nuxt config for axios if I set https to true, I get the error when I run npm run dev :

TypeError: Cannot read property 'replace' of undefined

Is this normal?
It's complaining about this code block in module.js

if (options.https === true) {
  const https = s => s.replace('http://', 'https://')   <-- 's' becomes undefined for some reason
  options.baseURL = https(options.baseURL)
  options.browserBaseURL = https(options.browserBaseURL)
}
Aposhian

Aposhian resolved the question #c354

axios-module •

ERR_INVALID_HTTP_TOKEN using axios in nuxtServerInit

Hmm, it looks like I was able to fix it. It looks like it was because I was testing locally by running a fastify server instead of using the standard nuxt development server. So it's likely not an issue with axios or nuxt-axios at all.

Aposhian

Aposhian posted a new question

axios-module •

ERR_INVALID_HTTP_TOKEN using axios in nuxtServerInit

In nuxtServerInit while running in universal mode, I make an api call using the nuxt-axios module. This request works in both the browser and in node, but when I make the request in nuxtServerInit it gives the error:

TypeError [ERR_INVALID_HTTP_TOKEN]: Header name must be a valid HTTP token [":method"]
    at ClientRequest.setHeader (_http_outgoing.js:518:3)
    at new ClientRequest (_http_client.js:222:14)
    at Object.request (https.js:305:10)
    at RedirectableRequest._performRequest (<my-project-directory>/node_modules/follow-redirects/index.js:169:24)
    at new RedirectableRequest (<my-project-directory>/node_modules/follow-redirects/index.js:66:8)
    at Object.wrappedProtocol.request <my-project-directory>/node_modules/follow-redirects/index.js:307:14)
    at dispatchHttpRequest (<my-project-directory>/node_modules/axios/lib/adapters/http.js:179:25)
    at new Promise (<anonymous>)
    at httpAdapter (<my-project-directory>/node_modules/axios/lib/adapters/http.js:21:10)
    at dispatchRequest (<my-project-directory>/node_modules/axios/lib/core/dispatchRequest.js:54:10)
    at async Store.MY_VUEX_ACTION (server.js:4573:9)
    at async Store.nuxtServerInit (server.js:4515:7)
    at async module.exports../.nuxt/server.js.__webpack_exports__.default (server.js:1608:7) {
  code: 'ERR_INVALID_HTTP_TOKEN'

My config in nuxt.config.js:

  axios: {
    baseURL: process.env.API_ENDPOINT
    progress: false,
    headers: {
      common: {
        'x-my-custom-header': process.env.CUSTOM_HEADER
      },
      post: {
        'Content-Type': 'application/json'
      }
    }
  }

The relevant parts of my store:

export const actions = {
  async nuxtServerInit({ dispatch }) {
    await dispatch('MY_VUEX_ACTION')
  },
  async MY_VUEX_ACTION({ commit }) {
    const { data } = this.$axios.get(process.env.SOME_URL)
    commit('SET_DATA', data)
  }
}
simplenotezy

simplenotezy posted a new question

axios-module •

Use this modules (with retries config) in nuxt.config?

Is there some how I can use this module in my nuxt.config.js file? I'd like the "retries" functionality.

Currently I import axios normally using: import axios from 'axios'; but how can I import this module?

RonAlmog

RonAlmog posted a new question

axios-module •

What is the proper way to return value and errors from store action to component?

in a store action i am calling the backend. these calls may succeed or fail. both these cases needs to be communicated back to the calling component.
Here is what i did so far. Both success and fail return to the same place, to the .then() of the dispatch function in the component, not to the catch().

store:
async saveProperty({ commit }, payload) {
return await this.$axios.$post('property', payload)
.then(result => {
console.log('result', result);
commit('CREATE_PROPERTY', result.data);
return result;
})
.catch(error => {
console.log('received error:', error);
return error.response.data;
});
}

component:

this.$store
.dispatch('property/saveProperty', property)
.then(result => {
console.log('success! ', result)
})
.catch(err => {
console.log('error!', err)
})

can i please get a working example of just this:
component calling a dispatch method in the store, sending data, receiving data back, and in case of server error, gets a notification with
the message from the server. Thanks!

algoth

algoth posted a new question

axios-module •

Browser reload gives 400 error on every alternate refresh

I am trying to user axios module to get profile data loaded using asyncData method.

It works when navigating within the app as well as on hard refresh (cmd+shift+R).

However, it does not work on browser refresh (cmd+R or click on refresh icon). What's very weird is that it works on every second refresh. When it does not work, I get error 400 (bad request) from firebase.

I have tried changing axios options in nuxt.config.js and tried changing baseURL to '/' as well as 'https://docchat-46b57.firebaseio.com'. But no luck.

Below is my code:

async asyncData(context) {
        let doc = {}
        console.log(context.params.docid)
        try {
            const res =  await context.$axios.get(`https://docchat-46b57.firebaseio.com/doctors.json?orderBy="slug"&equalTo="${context.params.docid}"`)
            console.log(res.data)
            for (let key in res.data) {
                doc = {...res.data[key], id: key}
            }
            return { docDetails : doc}
        }
        catch (error) {
            console.log(error)
        }

    },
rinaldioe

rinaldioe posted a new question

axios-module •

Global name is not defined

Hi, one of my service use nuxt 5.0.1, today we try to build and got this error Could not compile template /app/node_modules/@nuxtjs/axios/lib/plugin.j s: globalName is not defined, the last time we build is 2 days ago and it works as usual can you help me with this? and we didnt change anything

Moxie1776

Moxie1776 posted a new question

axios-module •

Origin: http://localhost:3000 not being sent

When I deployed the code on my test server for some reason it is no longer sending Origin as part of the header. When running this locally it is sending "Origin: http://localhost:3000". On the test server I ran Nuxt with start after running build rather than being in dev mode. On the server side all of the CORS stuff is going just fine. However, I am reading the Origin data on the server (for various reasons). The server code is giving errors because Origin is missing.

Client Nuxt/Vuetify
Server Flask (Python)
being 'served' by NGINX on Linux, forwarding data to either the NUXT or Flask client with a proxy redirect.

nuxt.config.js
axios: {
baseURL: 'http://slctlwell01/data',
},

login.vue (login has tabs for doing a password reset and sending validation email to the users, I'm testing PW reset)

async sendReset(data) {
try {
await this.$axios({
method: 'post',
baseURL: 'http://slctlwell01/api',
url: 'send_reset',
data: {
email: this.email
}
}).then((e) => {
this.$notifier.showMessage({ content: e.data.m, color: e.data.c });
});
} catch (e) {
this.$notifier.showMessage({ content: e.data.m, color: e.data.c });
}

napestershine

napestershine resolved the question #c348

axios-module •

Access API with basic auth

Solved

napestershine

napestershine posted a new question

axios-module •

Access API with basic auth

HI

I need to make request to an API which need HTTP Basic auth to bypass. I tried it many ways to access it but no luck for now.

I tried to setup in nuxt.config.js

 axios: {
    host: 'http://example.com',
    credentials: {
      username: process.env.API_USER,
      password: process.env.API_PASSWORD
    },
    debug: true,
    https: false
  }

But it doesn't work.

so I tried to put it directly:

<script>
export default {
  async asyncData({ $axios, error }) {
    try {
      const { data } = await $axios({
        method: 'get',
        url:
          'http://example.com/api/post_categories.json',
        withCredentials: true,
        headers:{Authorization:'Basic '+BASE64ENCODED(USERNAME+':'+PASSWORD)}
      })
      return {
        categories: data
      }
    } catch (e) {
      // eslint-disable-next-line no-console
      console.log(e)
    }
  }
}
</script>

it's working for single API, but how can I set it up globally through nuxt.config.js

Thanks

jjelev

jjelev posted a new feature request

axios-module •

idea Use globalName instead of window.$nuxt in the plugin

What problem does this feature solve?

Nuxt global is leaking in the final build of application. However many modules reference this directly instead of refering to global name from configuration.

Can we use the globalName option in the nuxt config instead of $nuxt directly ?
https://github.com/nuxt-community/axios-module/blob/dev/lib/plugin.js#L129

const $loading = () => (window.$nuxt && window.$nuxt.$loading && window.$nuxt.$loading.set) ? window.$nuxt.$loading : noopLoading

What does the proposed changes look like?

const $loading = () => (window.<%= options.globalName %> && window.<%= options.globalName %>.$loading && window.<%= options.globalName %>.$loading.set) ? window.<%= options.globalName %>$loading : noopLoading
blowsie

blowsie posted a new question

axios-module •

HTTPS on localhost

HTTPS on localhost is not possible because of this change.
https://github.com/nuxt-community/axios-module/pull/93

There is no justification as to why this change has been made.

To me it feels like a developer issue and what should have been done is something along the lines of this in the config.

 https: process.env.NODE_ENV === 'development',

As it stands at the moments the https setting is redundant in localhost and the limitation is not well documented

sobolevn

sobolevn posted a new bug report

axios-module •

bug Can't resolve 'defu' in '/code/.nuxt'

Version

5.9.5

Reproduction link

https://travis-ci.com/github/wemake-services/wemake-vue-template/jobs/297973346#L1250

Steps to reproduce

  1. Install this template: https://github.com/wemake-services/wemake-vue-template
  2. Install dependencies with npm i
  3. Run npm run build

What is expected ?

I expect everything to work.

What is actually happening?

Nuxt is not building. Here's an output:

ERROR in ./.nuxt/axios.js
Module not found: Error: Can't resolve 'defu' in '/code/.nuxt'
 @ ./.nuxt/axios.js 6:0-24 75:31-35
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./.nuxt/client.js
alihamza1214

alihamza1214 posted a new question

axios-module •

Cannot read property 'setToken' of undefined

I just upgraded my nuxt version from 2.8.1 to 2.11.0 and nuxt axios from 5.5.4 to 5.9.5. After upgrading I am getting this error "Cannot read property 'setToken' of undefined" in async nuxtClientInit function.

async nuxtClientInit({ commit, dispatch }, context) {
// Authorization

let auth = this.$cookies.get('Authorization')
if (auth) {
  this.$axios.setToken(auth, 'Bearer')
  try {
    await dispatch('auth/fetch')
    // return true
  }
  catch (error) {
    this.$axios.setToken(null)
    // return false
  }
} else {
  this.$axios.setToken(null)
  // return false
}

}