NuxtN
Nuxt•3y ago
Skip

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',
});


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.

  1. 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',
});


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


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?
Was this page helpful?