Nuxt 3 axios issue
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!
3 Replies
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-fetchingNuxt
Data fetching · Get Started with Nuxt
Nuxt provides composables to handle data fetching within your application.
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)Depends on the external API. Usually the missing element is a
accept-encoding header. Try that, see if it helps.