wget可以运行，但是无法从React应用请求

Question

I have two linked Docker containers api and frontend . frontend is a ReactJS app inside nginx container. This is the Dockerfile:

FROM nginx:alpine

COPY ./build /usr/share/nginx/html/

and the run command:

docker run --name frontend --link api:api -p 80:80 frontend_img

When I sh inside frontend and run:

$ wget http://api:8080/api/users

works fine and I'm able to fetch the users. However, when my app tries to fetch the data, I'm getting ERR_NAME_NOT_RESOLVED error in the Chrome console.

This is my JS code:

fetchUsers() {
    return axios.get('http://api:8080/api/users')
      .then(response => response.data)
      .then(users => this.setState({ users }));
}

What am I missing? Do I need to configure something in NGINX in order to be able to fetch the data from the api or something?

Answer 1

Solved! Thanks to this accepted answer docker nginx ERR_NAME_NOT_RESOLVED

When connecting to containers with a reverse proxy, all the URL's used by the application need to point to that reverse proxy and not the application. Typically you do this by giving a path in the URL without a hostname.

First, I created a default.conf nginx file to add a location statement to redirect calls to my api container:

location /api/ {
  proxy_pass http://api:8080;
}

Then, in my webapp, I change my JS code so I request against /api/users , without hostname:

fetchUsers() {
    return axios.get('/api/users')
      .then(response => response.data)
      .then(users => this.setState({ users }));
}

Finally, in the Dockerfile, I replace default default.conf nginx file with the edited one:

FROM nginx:alpine
COPY default.conf /etc/nginx/conf.d
COPY ./build /usr/share/nginx/html/

That's all!