I can curl another docker container inside docker compose but not fetch in code

Question

I can't fetch from server container to frontend container even though I am able to get curl response from inside frontend container.

I have a docker-compose set up with a frontend and server container. I want to fetch server response from frontend, but i get the error GET http://server:5000/api/panels net::ERR_NAME_NOT_RESOLVED. I get the correct response if i execute the following command from inside the frontend container curl http://server:5000/api/panels

Dockerfile server

FROM node:11
ADD . /code
WORKDIR /code
COPY package*.json ./

RUN npm install
COPY . .

EXPOSE 5000
CMD [ "node", "server" ]

Dockerfile frontend

FROM node:11
ADD . /frontend
WORKDIR /frontend
COPY package*.json ./

RUN npm install
COPY . .

EXPOSE 3000
CMD ["npm","start"]

docker-compose.yml

version: '3'

services:
  server:
    build: .

  frontend:
    depends_on:
      - server
    build: ./frontend
    ports:
      - "3030:3000"

api-call

this.callApi()
      .then((res: ISolarPanels) => {
        this.setState({ solarPanels: res })
      })
      .catch((err) => console.warn('server is offline?', err))

 private callApi = async () => {
    const response = await fetch(process.env.REACT_APP_URL+'/api/panels')
    const body = await response.json()\
    if (response.status !== 200) {
      throw Error(body.message)
    }
    return body
  }

package.json (i use dev script for local development and start for docker

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/d3": "^5.0.1",
    "d3": "^5.7.0",
    "prettier": "^1.13.5",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts-ts": "2.16.0",
    "tslint-eslint-rules": "^5.3.1"
  },
  "scripts": {
    "lint": "node_modules/.bin/tslint -c tslint.json 'src/**/{*.ts,*.tsx}'",
    "dev": "REACT_APP_URL=http://localhost:3000 react-scripts-ts start",
    "start": "REACT_APP_URL=http://server:5000 react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "proxy": "http://localhost:5000/",
  "devDependencies": {
    "@types/node": "^10.3.3",
    "@types/react": "^16.3.17",
    "@types/react-dom": "^16.0.6",
    "typescript": "^2.9.2"
  }
}

Answer 1

For a quick fix, you can allow CORS on your server. here

And in your web application you can use: 0.0.0.0:5000/api for pointing to server.

Also, you would need to bind your port in server service in docker-compose.yml file.

  server:
    build: .
    ports:
      - "5000:5000"

Answer 2

To sum up what went wrong and how it was fixed. The request was of-course sendt from the browser, and not the frontend container, therefore the server port needed to be exposed and CORS enabled from the serverside.