Activities

oocydo

oocydo posted a new question

axios-module •

Querying serverMiddleware route

Hello all! I'm running Express server on Nuxt app using serverMiddleware. Whenever I try to fetch data from Express using axios.get('/api') I'm getting 404. What can I do? Fetching using axios.get('http://host:port/api') works, however, it's not suitable
Actually, it works once when I reload the app and breaks on all next requests
What is the proper way to do requests to serverMiddleware?
It shows the same behavior both on production and development modes

lromor

lromor posted a new question

axios-module •

store http-only cookies on server side and send them to browser.

I have the following use case:

I have a basic app with nuxt SSR.
At some point, I make an api call to my backend (using proxy:true, withCredentials:true, etc..)
The backend answers setting an http-only cookie in the headers.
The server middleware is the first one making the call to render the page
and correctly receives in its headers the secret cookie

{
 'content-type': 'text/html; charset=utf-8',
  'content-length': '2',
  'set-cookie': [ 'secret_cookie=World; Secure; Path=/' ],
  connection: 'keep-alive'
 }

what I would expect is that
a) axios on the server stores the cookies to be used in the subsequent requests (given I'm using withCredentials:true)
b) the server side rendering sets the received http-only cookies in the rendered page.

Is this supposed to be done manually? Or it should work out of the box with withCredentials?

msonowal

msonowal posted a new bug report

axios-module •

bug Interceptor for 404 with error method not working

Version

v5.8.0

Reproduction link

https://github.com/msonowal/nuxt-bug-reproduce-link

Steps to reproduce

add this in
plugins dir make file name it axios.js

and add the link in nuxt config plugins array
visit any route whose axios calls are 404

axios.js file content below

export default function({ $axios, error }) {
  $axios.onError((responseError) => {
    if (responseError.response.status === 404) {
      error({ statusCode: 404, message: 'Post not found from interceptor' })
    }
  })
}

What is expected ?

show the error response with 404 code as defined in the nuxt app
Post not found from interceptor

but

not redirect to 301

What is actually happening?

it is showing default nuxt error

NuxtServerError
Request failed with status code 404

moshemo

moshemo posted a new question

axios-module •

How to Add a Developer Access Token

This is my first time using nuxt-axios (indeed, my first time using axios). I am trying to sync into the Feedly API. These are the instructions that they offer:

We offer a standard OAuth 2.0 authentication module which provide the application an OAuth access token. Most endpoints expect an Authorization header.

$ curl -H 'Authorization: OAuth [your developer access token]' https://cloud.feedly.com/v3/profile

I am wondering how to translate this to nuxtjs-axios.

So far, what I have done is the following:

// nuxt-config.js
export default {
  ...
  plugins: [{ src: `~/plugins/axios.js` }],
  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    credentials: true
  },

  env: {
    FEEDLY_ACCESS_TOKEN:
      [MY_FEEDLY_DEV_ACCESS_TOKEN]
  },
  ...
}

// plugins/axios.js
export default function({ $axios }) {
  $axios.setHeader('Authorization', `OAuth ${process.env.FEEDLY_ACCESS_TOKEN}`)
}

But I am not at all sure that this is the right way to do this.

So my question is, how can I implement this API?

Thanks.

npolyakoff

npolyakoff posted a new question

axios-module •

baseURL concats with localhost

Hello
I have a SPA that must send requests to backend server which locates on another address.

So i overwrite my baseURL in nuxt.config.js:

axios: {
baseURL: 'my_location/api/v1',
},

but when i send requests the actual url looks like this:

"http://localhost:8080/my_location/api/v1/login"

A can't figure out what I did wrong, I read official doc for hours, but still no progress

mrleblanc101

mrleblanc101 posted a new bug report

axios-module •

bug baseUrl default port is :3000 even when nuxt use a random port

Version

v5.8.0

Reproduction link

https://codesandbox.io/

Steps to reproduce

  1. Run nuxt dev when port 3000 is already in use
  2. Nuxt will start on a random port
  3. Do not edit the axios object in nuxt.config.js
  4. Call to localhost will fail because they will use port 3000 instead of random nuxt port

What is expected ?

Axios should use process.env. NUXT_PORT

What is actually happening?

Axios default to port 3000

Additionnal info

I do this because I load json data hosted in the static folder. I can't use import as these fill will be updated regularly via a setInterval

scherpe

scherpe posted a new question

axios-module •

how can i return data in $axios.onResponse ?

code:
// axios.js
$axios.onResponse(response => {
if (response.status === 200) {
let data = response.data;
data.errcode = parseInt(data.errcode);
return data
}
});
how can i return data

webcoderkz

webcoderkz posted a new question

axios-module •

Nuxt environment variables in nuxt.config.ts

nuxt.config.ts:

env: {
  cmsUrl: process.env.CMS_URL || 'http://localhost:1337'
}

I'm setting CMS_URL as system variable on a production/staging mode, otherwise it would use a localhost in a dev mode.

However if i reuse this env variable inside nuxt.config.ts:

axios: {
  baseURL: process.env.cmsUrl
}

My NUXT app won't even start, saying ECONNREFUSED 127.0.0.1:80, i assume thats because env variable is not working.

Also you mention in a documentation: https://axios.nuxtjs.org/options that API_URL variable could be used to OVERRIDE default baseURL value, in fact it doesn't, until i manually set it so baseURL: process.env.API_URL

youncccat

youncccat posted a new question

axios-module •

Use prefix in production is not working

This is my part of nuxt.config.js

axiox: {
prefix: '/proxy',
proxy: true,
},
proxy: {

}
the @nuxt/axios module is work when mode is dev, but it's not working in production(when exec nuxt build)

Can you help me?

youncccat

youncccat posted a new question

axios-module •

Use prefix in production is not working

This is my part of nuxt.config.js

axiox: {
prefix: '/proxy',
proxy: true,
},
proxy: {

}
the @nuxt/axios module is work when mode is dev, but it's not working in production(when exec nuxt build)

Can you help me?

youncccat

youncccat posted a new question

axios-module •

Use prefix in production is not working

This is my part of nuxt.config.js

axiox: {
    prefix: '/proxy',
    proxy: true,
},
proxy: {
    ...
}

the @nuxt/axios module is work when mode is dev, but it's not working in production(when exec nuxt build)

Can you help me?

isuke01

isuke01 posted a new question

axios-module •

"error is not a function" wile trying to catch an error.

Hello.
I tried to catch error using axios.
Inside store index.js I have action:

async nuxtServerInit({ dispatch }) { await dispatch('core/loadConfig') }

Action for
I tried https://nuxtjs.org/guide/async-data#handling-errors
but with no luck, just error. I even tried to copy exact code from example but still im getting error:
error is not a function

Im doing something wrong?
Or maybe something else is incorrect?

Thanks :)

Zrzut ekranu 2019-10-30 o 21.29.22.png

Nuxt.js v2.10.2
Axios Module v5.8.0

hamid-r-shakibi

hamid-r-shakibi posted a new bug report

axios-module •

bug Proxy module for axios not working

Version

v5.6.0

Reproduction link

https://codesandbox.io/embed/codesandbox-nuxt-xflhs?fontsize=14

Steps to reproduce

When I use a proxy for Axios and set prefix, it works fine with auth module ( local strategy) but when I use Axios directly in pages ( in here placed in index.vue in mounted function ) I got an error:
GET http://localhost:3000/api/packs/ 404 (not found)
Nuxt is lunched in port 3000 and backend for API is on port 1200
axios config that is used when sending request :
{
.
.
.
url: "/papi/api/packs"
.
.
.
}

What is expected ?

GET http://localhost:1200/api/packs/ 200 (Ok)

What is actually happening?

GET http://localhost:3000/api/packs/ 404 (not found)

what am I doing wrong?

apple12347678

apple12347678 posted a new feature request

axios-module •

idea Distinguishing empty string vs undefined for options.browserBaseURL

What problem does this feature solve?

For some sites that can have multiple frontend URLs (ex. test1.com, test2.org pointing the exact same server) I think it is not a good practice to send AJAX requests such as $axios.get('https://test1.com/api/sth') - it will cause CORS errors on test2.org sites. So I want to request without base URL on clients, for example, $axios.get('/api/sth') - it will append its client-side base URL automatically.

If baseURL is empty, it works fine on both client and server side - every request is fired with no baseURL. But on server side the automatically set baseURL is 127.0.0.1:80, so if I'm proxying http requests from another server to localhost:3000 or something, it will throw ECONNREFUSED as my rendering server is not listening on port 80. So what I want to do is to set { baseURL: 'http://localhost:3000', browserBaseURL: '' }.

The problem is, if I set { baseURL: 'http://localhost:3000', browserBaseURL: '' }, browserBaseURL is completely ignored. As empty string is considered falsy, the if statement is not skipped and browserBaseURL is automatically set to baseURL. The exactly same thing happens when I use empty APIURLBROWSER. I think it's fundamentally different when the variable is an empty string or undefined. If one of axios.options.browserBaseURL or process.env.APIURLBROWSER is set, the browserBaseURL value should be an empty string, if not, undefined. So could you just change the conditional statement to check if the variable is undefined or not? I hope it will help lots of people struggling with browserBaseURLs just like me… :)

p.s. My breakthrough, or cheat, was to set browserBaseURL: ' ' (string with one whitespace) - it becomes truthy and the space is removed automatically.

The code I want to fix is here:

https://github.com/nuxt-community/axios-module/blob/master/lib/module.js#L81

What does the proposed changes look like?

if (!options.browserBaseURL) => if (typeof options.browserBaseURL === 'undefined') or any assertion that the value is not simply falsy, but exactly undefined

shlima

shlima posted a new question

axios-module •

axios.isCancel is not a function

After upgrading to nuxt-axios v.5.7.0 all POST requests began to fall with an error

 await this.$axios.$post('/v1/advert')
[Log] TypeError: axios.isCancel is not a function. (In 'axios.isCancel(error)', 'axios.isCancel' is undefined)
Ti-webdev

Ti-webdev posted a new question

axios-module •

v5.7.0 TypeError: axios.isCancel is not a function

@pi0 the problem is here:

  axios.onError(error => {
    if (error && error.config && error.config.progress === false) {
      return
    }

    currentRequests--

    if (axios.isCancel(error)) {
      return
    }

    $loading().fail()
    $loading().finish()
  })
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.