Nuxt•2y ago

Nuxt 3 with Docker and Backend

I have a REST that works fine in Dev and Prod mode with SPA Vue 3. As a frontend for my application, I have chosen Nuxt 3 and am getting the following problem: 1. On the page i make a call to my API:

const { data: node, error } = await useFetch('http://localhost:3001/api/v1/nodes/common/all', {
  method: 'GET',
});

const { data: node, error } = await useFetch('http://localhost:3001/api/v1/nodes/common/all', {
  method: 'GET',
});

And get Error: fetch failed () if i reload browser page or if i trying to access the page directly. But if i switch to another route and come back, the call above works and I get the data. 2. I can solve this problem if instead of localhost, I specify the name of my backend container:

const { data: node, error } = await useFetch('http://my_backend_container:3001/api/v1/nodes/common/all', {
  method: 'GET',
});

const { data: node, error } = await useFetch('http://my_backend_container:3001/api/v1/nodes/common/all', {
  method: 'GET',
});

But now if I switch to another route and come back I get this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://my_backend_container:3001/api/v1/nodes/common/all. (Reason: CORS request did not succeed). Status code: (null).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://my_backend_container:3001/api/v1/nodes/common/all. (Reason: CORS request did not succeed). Status code: (null).

I use NGINX as reverse proxy & CORS is enabled on my backend. In my dashboard Vue 3 works fine with my API. But in Nuxt 3 i get the problems described above. Please tell me what am I doing wrong?

9 Replies

Unknown User•2y ago

Message Not Public

SkipOP•2y ago

Can you help me pls a little more with about creating a docker network? in docker-compose do i need to create a network and declare it in containers?

Unknown User•2y ago

Message Not Public

SkipOP•2y ago

Ok, thank you anyway! i find a solution for anyone who face the same problem case, i use useAsyncData and for baseUrl - process.server ? runtimeConfig.public.BASE_API_URL : runtimeConfig.public.BASE_API_BROWSER_URL, where browser url is localhost and base url is backend docker container name now everything works fine, there is no hydration missmatch warnings and SSR works fine

Unknown User•2y ago

Message Not Public

SkipOP•2y ago

yes sure

scratch_1.yml

Dockerfile

Unknown User•2y ago

Message Not Public

SkipOP•2y ago

Many thanks!

Unknown User•2y ago

Message Not Public

Gaming

Programming

Nuxt 3 with Docker and Backend