How to send requests from nginx & react container to a spring boot container?

Question

I have two docker containers, which have the separated front-end and back-end of my application.

In the first container I have already built reactjs code and a nginx web server. Here is the Dockerfile,

FROM nginx:1.15.2-alpine
COPY ./build /var/www
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
ENTRYPOINT ["nginx","-g","daemon off;"]

This is my nginx.conf file,

worker_processes 1;
events {
    worker_connections 1024;
}

http {
    server_tokens off;
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    upstream server {
        server 172.20.58.236:8080;
    }

    upstream client {
        server 172.19.59.36;
    }


    server {
        listen 80;

        root /var/www;
        index index.html index.htm;

        add_header 'Access-Control-Allow-Origin'  'http://172.19.59.36';
        add_header 'Access-Control-Allow_Credentials' 'true';
        add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';


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

        location ~* \.(?:manifest|appcache|html?|xml|json)$ {
            expires -1;
        }

        location / {
            try_files $uri $uri/ /index.html;
        }

        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
          expires 1M;
          access_log off;
          add_header Cache-Control "public";
        }

        location ~* \.(?:css|js)$ {
            try_files $uri =404;
            expires 1y;
            access_log off;
            add_header Cache-Control "public";
        }

        location ~ ^.+\..+$ {
            try_files $uri =404;
        }

        location /static/ {
            root /var/www;
        }
    }
}

I referred this & this for the configuration file.

My Dockerfile for the back-end,

FROM openjdk:8-jdk-alpine
ADD target/dependency-graph-service.jar dependency-graph-service.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "./dependency-graph-service.jar"]

Here is a sample route in my Spring Boot back-end,

@CrossOrigin(origins = "*")
    @RequestMapping(
            value = "/api/greet",
            method = RequestMethod.GET
    )
    public String getHealthCheck(){
        String greet = "Get Works!!";
        return greet;
    }

A typical request from the react front-end would look like,

sendRequest = () => {
        axios.get(`http://127.0.0.1/api/greet`)
            .then(res => {
                console.log(res)
            })
            .catch(err => {
                console.log(err)
            })
    };

As mentioned ip addresses for my resources are as follows, client - 172.19.59.36 server - 172.20.58.236

From browser I can talk to the back-end server through client app. This route works,

http://172.19.59.36/api/greet

A screenshot of the browser

And as expected I can get inside of the container and wget the same url and it works.

A screenshot of the terminal

The problem is when the same request is sent from the react application or the compiled javascript chunk, I get a CORS error, as it is generated inside the container I guess. This request does not hit the server.

Screenshot of the error

In the index.html by the script tag I have added a library and browser does not download it as well.

Library in script 404 on the library URL

Please guide me to correct this issue, I tried some nginx configs to resolve the CORS block but nothing worked.

When running the containers port mappings are as follows,

client(172.19.59.36) - 80:80
server(172.20.58.236) - 8080:8080

I referred this as well.

Thanks in advance.

Answer 1

Problem was solved by adding a proxy on the client side. In the react's package.json file adding the following line solved the issue.

"proxy": "http://localhost:8080/",