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"
  }
}

right now, its only localhost. The frontend is localhost:3030 — Jørgen
– Jørgen, Commented Mar 28, 2019 at 11:00
The error may come because of many issues. It usually indicates that the domain name cannot be resolved. It may also come because of your firewall restrictions. — Kartik Chauhan
– Kartik Chauhan, Commented Mar 28, 2019 at 11:03
Could you please try it by hitting on 0.0.0.0 instead of localhost? — Kartik Chauhan
– Kartik Chauhan, Commented Mar 28, 2019 at 11:05
I get the same error from the frontend on 0.0.0.0:3030 and localhost:3030. — Jørgen
– Jørgen, Commented Mar 28, 2019 at 11:07

aitchkhan · Accepted Answer · 2019-03-28 12:09:22Z

2

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"

answered Mar 28, 2019 at 12:09

aitchkhan

1,9621 gold badge20 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jørgen · Accepted Answer · 2019-03-28 12:25:16Z

1

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.

answered Mar 28, 2019 at 12:25

Jørgen

3602 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related