How To Send Requests From Nginx & React Container To A Spring Boot Container?

- 1 answer

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
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 {

    upstream client {

    server {
        listen 80;

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

        add_header 'Access-Control-Allow-Origin'  '';
        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
ENTRYPOINT ["java", "-jar", "./dependency-graph-service.jar"]

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

@CrossOrigin(origins = "*")
            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 = () => {
            .then(res => {
            .catch(err => {

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

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

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 script404 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( - 80:80
server( - 8080:8080

I referred this as well.

Thanks in advance.



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/",