Nuxt•4w ago

$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...

16 Replies

kapa.ai•4w 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•4w ago

<@358326054357565442> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

HardWareOP•4w ago

SSR log shows that data is correct

HardWareOP•4w ago

Before full load, all is correnct, right after it corrupt

HardWareOP•4w ago

manniL•4w ago

@HardWare can you try w/o proxying but by using $fetch with it in Nitro?

HardWareOP•4w ago

Simple $fetch works fine. What do you mean „in Nitro”, am not sure?

manniL•4w ago

I meant in your nitro API endpoint where you use proxy rn, right?

HardWareOP•4w ago

On server, I haven’t tried. Give a sec Yes, simple $fetch works in Nitro on container name request http://php

manniL•4w 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

HardWareOP•4w ago

I'm also not sure, but it looks like parsing error thats why it looks like ss above

manniL•4w ago

what are the headers that are returned in the gibberish response?

HardWareOP•4w ago

Is there possibility that response is not decompressed correctly?

manniL•4w ago

possibly. Would be good to have a reproduction 👍

HardWareOP•4w 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

Gaming

Programming

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