N
Nuxt3w ago
HardWare

$fetch and useFetch proxy request receive strange binary instead proper json+ld object

Hi, I am using nuxt reverse proxy mothode made by Alexander Lichter, but data is corrupted on client-site. https://www.youtube.com/watch?v=J4E5uYz5AY8 How correct json should looks like:
const dd = await $fetch('/api/rocket/gallery',)
console.log(dd)
{
"@context": "/contexts/Gallery",
"@id": "/rocket/gallery",
"@type": "Collection",
"totalItems": 0,
"member": []
}
const dd = await $fetch('/api/rocket/gallery',)
console.log(dd)
{
"@context": "/contexts/Gallery",
"@id": "/rocket/gallery",
"@type": "Collection",
"totalItems": 0,
"member": []
}
Im using docker containers so my server-site api endpoint is http://php/rocket/gallery Traffic is like nuxt-clinet -> nuxt-api -> backend-api
Alexander Lichter
YouTube
The BEST way to proxy your API in Nuxt
➡️ Proxying routes to your back-end or third party APIs is a common practice! Over the last two years, various strategies came up in Nuxt. But not all of them work equally will. To figure out which two strategies are the recommended ones, we have a look at the four most common strategies, their shortcomings and which ones I would recommend to us...
No description
No description
No description
16 Replies
kapa.ai
kapa.ai3w ago
Hi @HardWare. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights into your issue with $fetch and useFetch in Nuxt. It seems you're experiencing a problem with data serialization when using a reverse proxy setup. The issue you're describing is likely related to how Nuxt handles data serialization between the server and client. According to the Nuxt documentation on data fetching (https://nuxt.com/docs/getting-started/data-fetching#serializing-data-from-api-routes), when fetching data from the server directory, the response is serialized using JSON.stringify. This can lead to limitations in serialization, especially with complex data types. To address this issue, you have a few options: 1. Custom Serializer Function: You can define a toJSON function on your returned object to customize the serialization behavior. This approach is described in the Nuxt documentation on custom serializer functions (https://nuxt.com/docs/getting-started/data-fetching#custom-serializer-function). 2. Alternative Serializer: While Nuxt doesn't officially support an alternative serializer to JSON.stringify, you can work around this by returning your payload as a normal string and using the toJSON method to maintain type safety. An example using superjson (https://github.com/blitz-js/superjson) is provided in the Nuxt documentation (https://nuxt.com/docs/getting-started/data-fetching#using-an-alternative-serializer). 3. Custom $fetch Instance: As demonstrated in Alexander Lichter's video Custom $fetch and Repository Pattern in Nuxt 3 (https://www.youtube.com/watch?v=jXH8Tr-exhI), you can create a custom $fetch instance that handles the serialization and deserialization of your data. This approach might be particularly useful in your case, as it allows you to control how the data is processed at each step of your proxy setup. Given that you're using Docker containers and a proxy setup, it's important to ensure that your Nuxt application can correctly access the backend API. Make sure your Docker network configuration allows proper communication between your Nuxt container and the PHP backend. If you're still experiencing issues, you might want to implement logging or debugging at each step of your request chain (nuxt-client -> nuxt-api -> backend-api) to identify where exactly the data is being corrupted or mishandled. Remember, when using useFetch or useAsyncData, the data returned is wrapped in a ref, so you might need to access it using .value as mentioned in this Stack Overflow answer (https://stackoverflow.com/questions/77946556). If these suggestions don't resolve your issue, you may need to provide more detailed information about your specific setup and the exact point where the data becomes corrupted for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai3w ago
<@358326054357565442> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
HardWare
HardWareOP3w ago
SSR log shows that data is correct
No description
HardWare
HardWareOP3w ago
Before full load, all is correnct, right after it corrupt
No description
HardWare
HardWareOP3w ago
No description
manniL
manniL3w ago
@HardWare can you try w/o proxying but by using $fetch with it in Nitro?
HardWare
HardWareOP3w ago
Simple $fetch works fine. What do you mean „in Nitro”, am not sure?
manniL
manniL3w ago
I meant in your nitro API endpoint where you use proxy rn, right?
HardWare
HardWareOP3w ago
On server, I haven’t tried. Give a sec Yes, simple $fetch works in Nitro on container name request http://php
manniL
manniL3w ago
interesting. Good to know but ideally a minimal reproduction would be helpful to fix it (opening it in the Nitro or Nuxt repo). Might be headers not being passed around the right way or results interpreted as binary. Not entirely sure
HardWare
HardWareOP3w ago
I'm also not sure, but it looks like parsing error thats why it looks like ss above
manniL
manniL3w ago
what are the headers that are returned in the gibberish response?
HardWare
HardWareOP3w ago
No description
HardWare
HardWareOP3w ago
Is there possibility that response is not decompressed correctly?
manniL
manniL3w ago
possibly. Would be good to have a reproduction 👍
HardWare
HardWareOP3w ago
I’ve tested other entities of my api, and that’s kinda strange. Some have that issue, some aren’t. I don’t know what to think about it On postman they works fine, same as curl request from nuxt container to api
Want results from more Discord servers?
Add your server