In the onResponse hook, response.body is a ReadableStream, how to decode it ?

$http.onResponse((req, options, res) => {
  console.log('Response data :', res.body)
});

Response data : ReadableStream {locked: false}

I tried to read the stream but I get a byte array.

$http.onResponse(async (req, options, response) => {
  console.log('Response data :', await response.body.getReader().read())
});

Response data : {value: Uint8Array(296), done: false}

nuxt-community/axios-module#294

When using $delete(), i want to send data in body. But no data is passing.
Please tell me any fixes

Hi, I need to access baseURL property in a template, is it possible to add a getter for it?

Thanks

Although Nuxt polyfills unfetch in IE, ky uses an implementation of the header class that isn't compatible with IE 11.

Probably worth mentioning in the docs.

Version

v0.3.2

Reproduction link

https://github.com/happycoder97/nuxt-http-typescript-bug1-repro

Steps to reproduce

Just run yarn dev

What is expected ?

App compiles successfully.

What is actually happening?

Typechecking fails.

That should help to remove workarounds we have here

I'm getting the above error using code directly taken from the example in docs:

https://http.nuxtjs.org/guide/usage.html#using-in-asyncdata

 "dependencies": {
    "@nuxt/http": "^0.3.8",

<template>
  <pre>{{ ip }}</pre>
</template>

<script>
export default {
  async asyncData({ $http }) {
    const ip = await $http.get('http://icanhazip.com').text()
    return { ip }
  }
};
</script>

browser

console

 ERROR  $http.get(...).text is not a function                                                      00:10:30

  at asyncData (about.vue:16:0)
  at promisify (.nuxt/utils.js:245:0)
  at Promise.all.Components.map.Component (.nuxt/server.js:215:0)
  at Array.map (<anonymous>)
  at module.exports../.nuxt/server.js.__webpack_exports__.default (.nuxt/server.js:210:0)

Versions

"nuxt": "^2.14.9"
"@nuxt/http": "^0.6.1",
node: v12.16.3

Reproduction

https://github.com/pat-lego/io.github.vm.patlego.website/tree/feature/http
The generation of /profile/blogs fails since it cannot find $http within the asyncData function.
The site is full static

Steps to reproduce

Run
cd io.github.vm.patlego.website/website/website.ui/src/main/resources/website.ui
npm install
npm run generate

What is Expected?

The /profile/blogs page has not been generated due to an issue with the asyncData function not being able to find some parameters in $http.

The profile/blogs page should of been generated.

What is actually happening?
The page should be built but the page is skipped due to the following error:

Entrypoint app = server.js server.js.map
ℹ Merging Tailwind config from ~/tailwind.config.js                                                                                                                              nuxt:tailwindcss 10:36:59
ℹ Full static generation activated                                                                                                                                                                10:36:59
ℹ Generating output directory: dist/                                                                                                                                                              10:36:59
ℹ Generating pages with full static mode                                                                                                                                                          10:36:59

 ERROR   /profile/blogs                                                                                                                                                                           10:36:59

HTTPError: Not Found
    at fn (node_modules/ky/umd.js:323:0)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async Ky._retry (node_modules/ky/umd.js:418:0)
    at async http_HTTP.module.exports.http_HTTP.<computed> [as get] (node_modules/.cache/nuxt/http.js:92:0)
    at async asyncData (pages/profile/blogs.vue:86:0)


 ERROR  Not Found                                                                                                                                                                                 10:36:59

  at fn (node_modules/ky/umd.js:323:0)
  at runMicrotasks (<anonymous>)
  at processTicksAndRejections (internal/process/task_queues.js:97:5)
  at async Ky._retry (node_modules/ky/umd.js:418:0)
  at async http_HTTP.module.exports.http_HTTP.<computed> [as get] (node_modules/.cache/nuxt/http.js:92:0)
  at async asyncData (pages/profile/blogs.vue:86:0)

✔ Generated route "/profile"                                                                                                                                                                      10:37:00
✔ Generated route "/profile/blog"                                                                                                                                                                 10:37:00
✔ Client-side fallback created: 200.html    

The issue is this function in the blogs.vue page

 async asyncData ({$http}) {
    if (process.env.NODE_ENV === 'development') {
      const blogs = await $http.get('http://localhost:8181/cxf/patlegovm/1.0/site/blogs')
      return { blogs }
    } else {
      const blogs = await $http.get('/cxf/patlegovm/1.0/site/blogs')
      return { blogs }
    }
  }

I was only able to get data by using fetch() on client.

https://github.com/nuxt/test-utils

Version

v0.3.8

Reproduction link

https://codesandbox.io/s/priceless-voice-3mnwh

Steps to reproduce

Set Authorization headers during nuxtServerInit action in the store, they won't be present anymore in the client $http instance ($http._defaults.headers) afterwards

What is expected ?

the Authorization headers set on the $http instance server-side should be present in the $http instance client-side

What is actually happening?

the headers are empty client-side

Additional comments?

Not sure if this behaviour is intended ( and thus if its an issue) but it feels a bit odd having to set the request headers on both sides attended that I'm setting the header using the client cookies whenever available and that the client context is supposed to be hydated by the server-side data, right ?

What problem does this feature solve?

this is very much a runtime/environment variable issue. In order to use variables defined by nuxt-env, I would have to have access to the app object. This is something currently doable with the axios module

What does the proposed changes look like?

the config object should have have a baseURL variable, and the final url shouldn't be computed already.

How i can to start application on NUxt with Http module on IE EDGE? Maybe has some polyfill?

What problem does this feature solve?

Nuxt HTTP documentation states that this module isn't integrated yet with nuxt progress bar because of this sindresorhus/ky#34 isn't merged. But now it has merged.

What does the proposed changes look like?

Integrate nuxt progress bar

Hi !

I've got a problem with setHeader function : if I do : $http.setHeader('x-accessid', "20840")

so the response of any request is :
Access to fetch at 'https://local.test.fr/api/accesses' from origin 'https://local.admin.test.fr' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

The same request without setHeader function is OK.

Is setHeader Function delete some other header or just add the new one ?

Thank you for your help !

Vincent.

What problem does this feature solve?

What does the proposed changes look like?

Something like this :
httpRetry($http, {
retries: 2,
retryDelay: httpRetry.exponentialDelay,
retryCondition : function(err){
return err.status >= 400 && err.data.hasOwnProperty('retry') && err.data.retry
}
})

Version

v0.3.5

Reproduction link

https://jsfiddle.net/yqr9s70a/

Steps to reproduce

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

  async asyncData({ $http }) {
    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 07:59:22

  at asyncData (df028d49c11282eafe57.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 ?

To work in production as it does on development

What is actually happening?

Error

I believe we should not depend on ky but having a way to disable token headers on this example: https://http.nuxtjs.org/advanced/#register-hooks

Version

v0.5.0

Reproduction link

https://http.nuxtjs.org/guide/advanced.html#settoken-token-type

Steps to reproduce

The example in the docs shows you can set it by request type but the functionality doesn't exist. Planned for future perhaps?

// Adds header: `Authorization: Bearer 123` to only post and delete requests
this.$http.setToken('123', 'Bearer', ['post', 'delete'])

What is expected ?

Set token by request type

What is actually happening?

Not possible

What problem does this feature solve?

As specified in the Migration Guide, under Differences, both setHeaders and setToken are not scoped, which entails that we can only set headers globally, and not as per request. For small apps, this might not be a problem, but it is a problem for bigger ones that include authentication and different types of requests (get, post, put...), because in this cases, each request might need totally different headers.

What do the proposed changes look like?

Give the option to limit the existence of the current globally-defined headers to the next request, and then reset them. Or, enable the possibility to set scoped headers as part of the request options, as in the fetch method.

I think it's misprints?

Version

^0.1.2

Reproduction link

https://github.com/bovas85/nunziellasalluce.com

Steps to reproduce

Clone the repo
yarn
yarn generate

axios is not being used, ky is used instead which fails after timing out

What is expected ?

axios is used in nuxt.config as per imported

What is actually happening?

axios is not being used, ky is used instead which fails after timing out

Possible ?

I'm requesting data from Wordpress Api, which serves some data in response headers:

X-WP-Total: the total number of records in the collection
X-WP-TotalPages: the total number of pages encompassing all available records

But on Logging response get empty object. see below image

But in network request getting headers. see below image

Please resolve this issue, if not already or Guide me with the solution.

good afternoon

I am having a problem when trying to cancel a request for aws with the onDownloadProgress () event instantiated!

    const controller = new AbortController ()

    setTimeout (() => {
      console.log ('abort', Date.now ())
      controller.abort ()
    }, 2500)

    try {
      console.log ('request', Date.now ())
      await this. $ http.get ('https://storage-dev-test.s3.us-east-2.amazonaws.com/navicat121_premium_en_x64.exe', {
        signal: controller.signal,
        hooks: {
          beforeRequest: [
            (request) => {
              request.headers.delete ('Authorization')
            }
          ]
        },
        onDownloadProgress: (progress) => {
          console.log (progress)
        }
      }). then (async (responseAWS) => {
        await responseAWS.arrayBuffer (). then ((responseEnd) => {
          console.log (responseEnd)
        })
      })
    } catch (error) {
      console.log ('exception', Date.now ())
      if (error.name === 'AbortError') {
        console.log ('Fetch aborted')
      } else {
        console.error ('Fetch error:', error)
      }
    }

the error returned in the console is as follows:

Uncaught (in promise) DOMException: The user aborted a request.

Now if I remove the code part:

onDownloadProgress: (progress) => {
  console.log (progress)
}

No error is returned on the console. can anybody help me? because I need onDownloadProgress but with the error breaking the code I can't make the necessary finalizations.

Advanced use case. Inside a plugin create a new instance for multi baseURL or custom headers support.

plugins/http.js

export default function ({ $http }, inject) {
  inject(blog, $http.extend({
    baseURL: 'http://blog.mywebsite.com/api'
  }))
}

Nuxt Http is breaking when used with relative paths in the asyncData and fetch hook, below I put some pieces of code.

export default {
  data() {
    return {
      httpData: [],
    }
  },
  async fetch() {
    this.httpData = await this.$http
      .$get('/accounts/users')
      .then((result) => {
        return result.map((o) => ({
          ...o,
          _text: `${o.firstName} ${o.lastName}`,
        }))
      })
  },
  mounted() {
    this.$nextTick(() => {
      this.$fetch()
    })
  },
}

Error in fetch(): Only absolute URLs are supported

Using the @nuxt/http module with TypeScript leads to an error Cannot find name JSONValue
The type JSONValue must be imported from ky.

I can't open an issue via CMTY because the link is not working.

What problem does this feature solve?

Currently the default value of browserBaseUrl is baseUrl which works correctly if you are running your server on localhost as well. But when running Nuxt with HOST=0.0.0.0 then baseUrl and thus browseBaseUrl still fallbacks to localhost. This is fine for baseUrl, but browserBaseUrl shouldnt probably be pointing to localhost.

Related issue: nuxt/press#2 (as fix in nuxtpress I just added browserBaseUrl: '/' as option)

What does the proposed changes look like?

Set default value for browserBaseUrl to /

I get this error on a production environment, not in development mode. When I acess to link with a nuxt link in page, error doesn't ocurrs, only ocurrs when I enter on the page with url directly (refreshing for example also ocurrs)

Error stack:

ERROR  globals.Headers is not a constructor
  at mergeHeaders (node_modules_dev/ky/index.js:52:0)
  at deepMerge (node_modules_dev/ky/index.js:88:0)
  at validateAndMerge (node_modules_dev/ky/index.js:509:0)
  at Function.ky.<computed> [as get] (node_modules_dev/ky/index.js:516:0)
  at http_HTTP.module.exports.http_HTTP.<computed> [as get] (.nuxt/http.js:95:0)
  at http_HTTP.module.exports.http_HTTP.<computed> [as $get] (.nuxt/http.js:126:0)
  at asyncData (pages/catalogue.vue:36:0)
  at promisify (.nuxt/utils.js:278:0)
  at server.js:72810:23
  at Array.map (<anonymous>)
2021-04-13T02:52:13.304Z	ERROR	Unhandled Promise Rejection 	{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"TypeError: globals.Headers is not a constructor","reason":{"errorType":"TypeError","errorMessage":"globals.Headers is not a constructor","stack":["TypeError: globals.Headers is not a constructor","    at mergeHeaders (node_modules_dev/ky/index.js:52:0)","    at deepMerge (node_modules_dev/ky/index.js:88:0)","    at validateAndMerge (node_modules_dev/ky/index.js:509:0)","    at Function.ky.<computed> [as get] (node_modules_dev/ky/index.js:516:0)","    at http_HTTP.module.exports.http_HTTP.<computed> [as get] (.nuxt/http.js:95:0)","    at http_HTTP.module.exports.http_HTTP.<computed> [as $get] (.nuxt/http.js:126:0)","    at asyncData (pages/catalogue.vue:36:0)","    at promisify (.nuxt/utils.js:278:0)","    at server.js:72810:23","    at Array.map (<anonymous>)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: TypeError: globals.Headers is not a constructor","    at process.<anonymous> (/var/runtime/index.js:35:15)","    at process.emit (events.js:327:22)","    at processEmit [as emit] (/var/task/node_modules/signal-exit/index.js:161:32)","    at processPromiseRejections (internal/process/promises.js:245:33)","    at processTicksAndRejections (internal/process/task_queues.js:94:32)"]}
Unknown application error occurred

error is on a page, in this part:

  async asyncData({ $http }) {
    const data = await $http.$get(`xxx`)
    return { data }
  }

nuxt.config.js

...
modules: [
  '@nuxt/http'
]
...
http: {
    baseUrl: process.env.API_URL,
},

Versions:

@nuxt/http: 0.6.4
nuxt: 2.14.12

Hi,

I'm using nuxt/http to fetch data from my API using a proxy. This for a replacement of axios due to CORS errors.
Sometimes, not every time, I get this error during fetch ($fetchState.error): "message": "Only absolute URLs are supported", "statusCode": 500
This in dev and in build.

Fetch request
async fetch() {
const res = await fetch(
'/product-api/products?id=XX&category=XX
}
this.product = await res.json()
}

nuxt.config.js
http: {
retry: 1,
proxy: true,
prefix: "/product-api",
},
proxy: {
'/product-api': {
target: 'https://<api_url>/',
pathRewrite: {'^/product-api': ''}
}
}

Does someone has the same problem, or is there anything wrong in my approach?
Thanks!

Didn't see an issue template, but will happily update this if there is one.

I'm using $http in a nuxt static site. I wanted to add the onRequest hook so we could log requests during our generate to a monitoring/observability service. What I found was that the hook seems to cause some requests to never resolve back to the template. This also happens with nuxt dev too.

I tried returning & not returning the response like this:

  $http.onResponse((request, options, response) => {
    console.log(response)
    return response
  })

or

  $http.onResponse((request, options, response) => {
     console.log(response)
  })

I see the console.log from the response, but the page making the request never resolves.

If I comment out the whole $http.onResponse block, the site builds just fine. I'm able to use the $http.onRequest hook without this issue, it's just the onResponse hook that seems to cause problems.

Reproduction Steps

1. Create a Nuxt site for static hosting
2. Add @nuxt/http & add an $http request to asyncData
3. Create a plugin via the instructions here: https://http.nuxtjs.org/hooks#onresponse
4. Register that plugin in the nuxt-config
5. Run nuxt generate

Demo/Reproduction Repo

I made a demo repo using the pokemon api for the request here: https://github.com/mdarrik/http-middleware-test/

It's a plain nuxt-cli created repo with @nuxt/http, a server plugin that features the above code, and a request inside the
asyncData function of the index.vue page.

System Info

OS: Ubuntu via WSL2 (also confirmed on MacOS)
Node: 14.14.0

Other Info

If I switch the request in the demo from $http.$get to $http.get (no dollar sign) without changing any other code the promise seems to resolve. (it'll throw errors with properties accessed from the body being undefined), but if I update the request code like so:

$http.get(url).then(response => response.json()) 

the json conversion never seems to resolve. So it seems likely there's a bug in resolving the response body's stream if the onResponse hook is used?

Version

v0.5.0

Reproduction link

https://jsfiddle.net/eobk1pam/1/

Steps to reproduce

Use any HTTP Methods via $http ($get, delete, $put, etc.), try to catch the error like:
this.$http .$get("http://nuxthttperrors.io/error") .then(resp => console.log(resp)) .catch(e => console.log(e.response.data));

What is expected ?

Expected to get the error response message, like in network tab in chrome.

P.S. Working like a charm in axios.

What is actually happening?

The error response object is always empty:
{ name: "HTTPError", response: {} }

Doing

const { $http } = useContext()
$http.$post(...)

$post is highlighted as not found in type. For some reason, it doesn't find the types for $http.

I'm using "@nuxt/http": "^0.6.2" and included the module in nuxt.config.js like so:

  modules: ['@nuxt/http'],

I'm already using other modules and buildModules, and they get their types inferred correctly. I'm not sure how to fix this or what I'm doing wrong.

I'm using the following versions:

    // dependencies
    "nuxt": "^2.15.0",
    "@nuxt/typescript-runtime": "^2.0.1",
    "@nuxtjs/composition-api": "^0.20.1",

    // devDependencies
    "@nuxt/types": "^2.15.0",
    "@nuxt/typescript-build": "^2.0.4",

Version

v0.5.11

Reproduction link

https://github.com/danielroe/nuxt-ie-http

See also browser support statement in ky README

Steps to reproduce

Although Nuxt polyfills unfetch in IE, ky uses an implementation of the header class that isn't compatible with IE 11.

Probably worth mentioning in the docs.

What is expected ?

IE11 support or a mention in the docs

What is actually happening?

No mention

I'm used to ky, and I want to use useSWRV in some of my components, rendered on client only.
Could it be possible to expose the universal fetch method of Ky with nuxt/http ?

What problem does this feature solve?

The port should be optional because there are many public (and non public) APIs that don't require the port in the Request URL.

What does the proposed changes look like?

In nuxt.config.js it should be possible to do

  http: {
    host: 'bla.bla.com',
    port: null, // or `false`
    prefix: '/v1' 
  }

Version

v0.5.10

Reproduction link

https://jsfiddle.net/Lqrzf41m/

Steps to reproduce

I'm just using the module, in a empty nuxtServerInit action.

My baseURL is http://localhost:8081

async nuxtServerInit({ commit }, context) {
    try {
      const libs = await context.$http.$get('/api/libs/')
      commit('setLibs', libs)
    } catch (error) {
      console.error(error)
    }
}

What is expected ?

this.$http to use a valid baseURL.

What is actually happening?

ERROR request to http://localhost81/api/libs/ failed, reason: getaddrinfo ENOTFOUND localhost81

Additional comments?

Looks like this line causes the issue : https://github.com/nuxt/http/blob/dev/lib/module.js#L119https://github.com/nuxt/http/blob/dev/lib/module.js#L119

Manualy setting http.baseURL in nuxt config produces the same error.

Workaround

Use a port not starting by 80

not able to set custom header Content-Type on post requests

request to failed, reason: unable to verify the first certificate
How to fix it?

This code is printing a Request object instead of a Response object.

// ~/plugins/http.js
export default function ({ $http, $toast }) {
  $http.onResponse(response => {
    console.log(response)
  })
}

Result

ky.HTTPError doesn't have statusCode.

The correct type of this is ky.HTTPError & { statusCode?: number }.
Please check the code and document below.

Source code:

Hi i'm having an issue where whenever I do a post request i can't pass the body along with it.

await this.$http.patch("http://localhost:3000/api/tasks/${task.id}",{task:"rando info here"})

and in my express server it looks like this
#/app.js
app.use(express.json({strict:false}));
app.use(bodyParser.urlencoded({ extended: true }));
app.use('/tasks', taskRouter)

and in my
#routes/tasks.js
router.patch('/:taskId', function(req,res,next){
console.log(req.body)
#a bunch of sql related code
})

just so I can see what's going on.

Is there a way to cache get requests like axios-extensions?

Hi, I cant use headers for my post request and there is no example for setting headers.

Here is what I wanted to operate:

async asyncData ({ $http }) {
const value= await $http.$post('https://example.com', '{"someBody":[someValue]}', {
headers: {
'content-type': 'application/json;charset=UTF-8'
}
})
return { value}
},

Maybe it's a simple question but how do I use parameters in nuxt/http? In nuxt/axios you can use parameters like:

  async asyncData({ $axios }) {
    const params = {
      consumer_key: process.env.consumer_key,
      consumer_secret: process.env.consumer_secret,
      orderby: 'date',
      per_page: 2,
      exclude: 45,
      type: 'simple'
    };

    const results = await $axios.$get('http://DOMAINNAME.com/wordpress/wp-json/wc/v3/products/?', { params })
    return { results };
  }

But this won't work using the nuxt/http module. Any idea how to pass parameters using this module?

Version

v0.5.12

Where?

Resolve example:

const { retry, timeout, prefixUrl, headers: { ...headers } } = this._defaults

Hi. Is there a way to globally set options.credentials = 'include'? I tried with the onRequest hook but then I get a TS error.

import { Plugin } from '@nuxt/types'

const httpPlugin: Plugin = ({ $http }) => {
  $http.onRequest((config) => {
    config.credentials = 'include'
  })
}

export default httpPlugin

`TS2540: Cannot assign to 'credentials' because it is a read-only property.`

If I add a // @ts-ignore on this error, the request won't be made. If I remove the code all together, the request is made.

Is there another way to set this globally instead of every request?