next14 docker CORS error when hosted on a same server and/or computer
Unanswered
Pixiebob posted this in #help-forum
PixiebobOP
I have built an app with dot net core 8 and the UI is built with next js.
I am self hosting both applications in docker containers.
when I run both apps on my computer just npm-run-dev-ing it and do a similar thing for dotnet app : no issue
when I run the dotnet in docker and next js npm run dev : no issue
when I run both in docker, next js on computer/server A and dotnet app in computer/server B : no issues
when I run both in docker and both computer/server A : I get CORS errors (only for fetch calls made in the server components. fetch calls made in client components are fine)
- I have made sure my in back-end app the CORS policy is enabled
- I have played with different network settings for both contaiers {
made a custom network and assigned to both
used host netwrok for both
used shared for both
}
none of my troubleshooting steps resulted in solving the problem
below is my docker file:
FROM node:20-alpine
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
CMD [ "npm","run","start" ]
and here is my compose file:
version: '3.8'
services:
frontend:
build:
context: .
dockerfile: Dockerfile
container_name: keeperUI
ports:
- '3000:3000'
networks:
- shared-network
networks:
shared-network:
would truly appreciate your help with this
I am self hosting both applications in docker containers.
when I run both apps on my computer just npm-run-dev-ing it and do a similar thing for dotnet app : no issue
when I run the dotnet in docker and next js npm run dev : no issue
when I run both in docker, next js on computer/server A and dotnet app in computer/server B : no issues
when I run both in docker and both computer/server A : I get CORS errors (only for fetch calls made in the server components. fetch calls made in client components are fine)
- I have made sure my in back-end app the CORS policy is enabled
- I have played with different network settings for both contaiers {
made a custom network and assigned to both
used host netwrok for both
used shared for both
}
none of my troubleshooting steps resulted in solving the problem
below is my docker file:
FROM node:20-alpine
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
CMD [ "npm","run","start" ]
and here is my compose file:
version: '3.8'
services:
frontend:
build:
context: .
dockerfile: Dockerfile
container_name: keeperUI
ports:
- '3000:3000'
networks:
- shared-network
networks:
shared-network:
would truly appreciate your help with this
8 Replies
Multiflora rose seed chalcid
how are you calling your backend from the frontend?
can you see if you are even receiving the request on your backend? Sometimes it happens that you get a CORS error if you can't even reach the server
can you see if you are even receiving the request on your backend? Sometimes it happens that you get a CORS error if you can't even reach the server
PixiebobOP
I was gonna spin it up and give you an aswer, but now suddenly ts doesn't regonize my global types (types.d.ts) and asking me to import the types everywhere so I cannot build and spin up the docker container ill get abck to you regarding this asap
Multiflora rose seed chalcid
Also just seeing your compose file I can see a problem with it. If you want to use the same docker network between your backend and frontend, you do it like this:
networks:
shared-network:
external: truePteromalid wasp
sometimes, cors error happens unexpectedly
Are you sure to install cors module?
PixiebobOP
hi, sorry for my late reply. TLDR had some issue with the build process and couldn't spin up the image to test the solution provided by @Multiflora rose seed chalcid .
here are some developments and update regarding this issue:
I was initially using http//:localhost:port as the path, someone explained that the localhost would point to the internal localhost inside the container. so I hard coded the ip of the machine itself and the issue is resolved.
as for CORS im certain about it having been configured correctly and having been installed, in fact I enabled it for any and all origins as a troubleshooting means.
I also tried the solution provided by YoYo and if the path for fetching is set to localhost i still face the same issue
so my question is, is there a way to use localhost but configure the docker network in a way taht the its localhost is the same localhost as the system?
here are some developments and update regarding this issue:
I was initially using http//:localhost:port as the path, someone explained that the localhost would point to the internal localhost inside the container. so I hard coded the ip of the machine itself and the issue is resolved.
as for CORS im certain about it having been configured correctly and having been installed, in fact I enabled it for any and all origins as a troubleshooting means.
I also tried the solution provided by YoYo and if the path for fetching is set to localhost i still face the same issue
so my question is, is there a way to use localhost but configure the docker network in a way taht the its localhost is the same localhost as the system?
@Pixiebob hi, sorry for my late reply. TLDR had some issue with the build process and couldn't spin up the image to test the solution provided by <@727051198548672552> .
here are some developments and update regarding this issue:
I was initially using http//:localhost:port as the path, someone explained that the localhost would point to the internal localhost inside the container. so I hard coded the ip of the machine itself and the issue is resolved.
as for CORS im certain about it having been configured correctly and having been installed, in fact I enabled it for any and all origins as a troubleshooting means.
I also tried the solution provided by YoYo and if the path for fetching is set to localhost i still face the same issue
so my question is, is there a way to use localhost but configure the docker network in a way taht the its localhost is the same localhost as the system?
Multiflora rose seed chalcid
Ah I see what your problem is. You can't use
You can't use localhost inside docker. Hope that fixes your issue.
localhost to access another service inside a docker network. You need to call them by calling their service name followed by the port number. For instance, in your compose setup above, your service name is frontend and is exposed on 3000 port inside the docker network. So, you access it inside the network by calling the path as http://frontend:3000You can't use localhost inside docker. Hope that fixes your issue.
Also, remove
EXPOSE 3000 from your dockerfile as that would be redundant now given you are using this dockerfile to build an image