title: How to send requests from nginx & react container to a spring boot container?
body: <p>I have two docker containers, which have the separated front-end and back-end of my application.</p>
  
  <p>In the first container I have already built reactjs code and a nginx web server.
  Here is the Dockerfile, </p>
  
  <pre><code>FROM nginx:1.15.2-alpine
  COPY ./build /var/www
  COPY nginx.conf /etc/nginx/nginx.conf
  EXPOSE 80
  ENTRYPOINT ["nginx","-g","daemon off;"]
  </code></pre>
  
  <p>This is my nginx.conf file,</p>
  
  <pre><code>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;
          }
      }
  }
  </code></pre>
  
  <p>I referred <a href="https://github.com/SaraVieira/rick-morty-random-episode/blob/master/nginx.conf" rel="nofollow noreferrer">this</a> &amp; <a href="https://stackoverflow.com/questions/45986631/how-to-enable-cors-in-nginx-proxy-server?noredirect=1&amp;lq=1">this</a> for the configuration file.</p>
  
  <p>My Dockerfile for the back-end,</p>
  
  <pre><code>FROM openjdk:8-jdk-alpine
  ADD target/dependency-graph-service.jar dependency-graph-service.jar
  EXPOSE 8080
  ENTRYPOINT ["java", "-jar", "./dependency-graph-service.jar"]
  </code></pre>
  
  <p>Here is a sample route in my Spring Boot back-end,</p>
  
  <pre><code>@CrossOrigin(origins = "*")
      @RequestMapping(
              value = "/api/greet",
              method = RequestMethod.GET
      )
      public String getHealthCheck(){
          String greet = "Get Works!!";
          return greet;
      }
  </code></pre>
  
  <p>A typical request from the react front-end would look like,</p>
  
  <pre><code>sendRequest = () =&gt; {
          axios.get(`http://127.0.0.1/api/greet`)
              .then(res =&gt; {
                  console.log(res)
              })
              .catch(err =&gt; {
                  console.log(err)
              })
      };
  </code></pre>
  
  <p>As mentioned ip addresses for my resources are as follows,
  client - 172.19.59.36
  server - 172.20.58.236</p>
  
  <p>From browser I can talk to the back-end server through client app.
  This route works,</p>
  
  <pre><code>http://172.19.59.36/api/greet
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/l5zHP.png" rel="nofollow noreferrer">A screenshot of the browser</a></p>
  
  <p>And as expected I can get inside of the container and wget the same url and it works.</p>
  
  <p><a href="https://i.stack.imgur.com/UeSB4.png" rel="nofollow noreferrer">A screenshot of the terminal</a></p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/oOwuG.png" rel="nofollow noreferrer">Screenshot of the error</a> </p>
  
  <p>In the index.html by the script tag I have added a library and browser does not download it as well. </p>
  
  <p><a href="https://i.stack.imgur.com/tkWHs.png" rel="nofollow noreferrer">Library in script</a>
  <a href="https://i.stack.imgur.com/TmXRI.png" rel="nofollow noreferrer">404 on the library URL</a></p>
  
  <p>Please guide me to correct this issue, I tried some nginx configs to resolve the CORS block but nothing worked.</p>
  
  <p>When running the containers port mappings are as follows,</p>
  
  <pre><code>client(172.19.59.36) - 80:80
  server(172.20.58.236) - 8080:8080
  </code></pre>
  
  <p>I referred <a href="https://medium.com/yld-engineering-blog/deploy-your-create-react-app-with-docker-and-ngnix-653e94ffb537" rel="nofollow noreferrer">this</a> as well.</p>
  
  <p>Thanks in advance.  </p>