Activities

unairubio

unairubio posted a new question

axios-module •

Setting Base URL from middleware

What is the correct was of setting the BaseURL from a middleware?

$axios.setBaseURL(apiUrl) does not work on first load (SSR). The client side will still keep the URL loaded through the nuxt.config.js file

MartinMalinda

MartinMalinda posted a new feature request

axios-module •

idea Allow using redaxios instead

What problem does this feature solve?

This allows shredding som extra KBs from the bundle. For IE11 you can add fetch polyfill with nomodule=true therefore the polyfill would only be imported for IE11.

What does the proposed changes look like?

Somewhere in nuxt config I would set redaxios: true. Alternatively, it could be decided based on browserlist.

crutch12

crutch12 posted a new feature request

axios-module •

idea Support @vue/composition-api setup function

What problem does this feature solve?

Don't extend context and this with $axios field

What does the proposed changes look like?

import { useAxios } from '@nuxtjs/axios';

...
setup() {
  const $axios = useAxios();

  return { $axios };
}
...
Jones-S

Jones-S posted a new question

axios-module •

How to use basic auth with the nuxt axios module

Hi there. I would like to fetch some data from an endpoint where I have to use basic authentication:
I tried something the axios-way:

const data = await this.$axios.$get(
  'http://endpoint',
  {},
  {
    credentials: true,
    auth: {
      username: 'user',
      password: 'pw'
    }
  }
)

How does this work?
I cant get it to run.

Thanks

SkyaTura

SkyaTura posted a new bug report

axios-module •

bug Plugin not using runtime variables from $config

Version

v5.11.0

Reproduction link

https://codesandbox.io/s/pensive-joliot-og9ey

Steps to reproduce

  • Install @nuxtjs/axios
  • Define a baseURL through module options
  • Define a baseURL through public runtime config
  • Define a baseURL through private runtime config
  • Check which one is used in browser

What is expected ?

Try to get baseURL from $nuxt.$config.axios

What is actually happening?

Using only static compiled variable at build-time in <%= options.baseURL %>

Additional comments?

This would also solve #88

jonalxh

jonalxh posted a new question

axios-module •

How to use 'this' (nuxt app) from axios module

Hi, I'm building an errorHandler with axios module interceptors and I want it to show an alert in some specific cases, e.g 409 errors, but I've not been able to achieve it uses this element to open a sweetalert popup, I've added axios with a plugin file and I'm doing the following:

//~/plugins/axios.js export default async ({ app, $axios }, inject) => { $axios.onError(error => { if (error.response && error.response.status === 409) { this.$swal('Error', 'Client error', 'error') } }) })

I can use axios and sweetalert, but not in axios error interceptor.
I've tried with app.$swal but it does not exist.

How can I use this.$swal in this point? Thanks

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 });
}