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
5 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?