Nuxt 3 axios issue | Nuxt | Page 1

languid wadi Oct 9, 2024, 9:28 AM

#

I have some problem, I’m currently working on a Nuxt 3 project using TypeScript and Axios to make external API calls. I’ve encountered an issue where the response from the API appears as unreadable characters when running the application locally. However, when I test the same API in Postman, it works perfectly fine.

Here are some details:

I’m using Axios to make the API requests.
The API response is expected to be in JSON format.
The issue only occurs in my local development environment.
Has anyone experienced something similar or have any insights on how to troubleshoot this? Any help would be greatly appreciated!

Thank you!

rough stratus Oct 9, 2024, 1:48 PM

#

Hi, as far as i know, we don't use axios anymore in Nuxt 3.

You can try to use the ohmyfetch $fetch or build in composables such as useFetch and useAsyncData.

here's the docs for that : https://nuxt.com/docs/getting-started/data-fetching

Nuxt

Data fetching · Get Started with Nuxt

Nuxt provides composables to handle data fetching within your application.

weak hemlock Oct 9, 2024, 2:05 PM

#

It is quite unusual to have anything scrambled like this on the same endpoint you typically expect only JSON response.

Nuxt 3 should still be compatible with axios, but it would not hurt to try await $fetch(...) to compare your original axios call with ofetch side by side.

Otherwise there are couple things I would troubleshoot:

is there anything specific about the backend API? proxy? does it stream JSON (for chatbot UI) or dump it as a single response? do you own the source? what kind of backend technology is this?
do you observe anything suspicious in response headers?
does it behave the same for some other API? (e.g. https://dummyjson.com/test)

#Nuxt 3 axios issue