如何将请求从 nginx 和 React 容器发送到 Spring Boot 容器？

Question

我有两个 Docker 容器，它们具有独立的应用程序前端和后端。

在第一个容器中，我已经构建了 ReactJS 代码和 nginx Web 服务器。这是 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;"]

这是我的 nginx.conf 文件，

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

我在配置文件中引用了this和this 。

我的后端 Dockerfile，

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

这是我的 Spring Boot 后端的示例路线，

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

来自反应前端的典型请求如下所示：

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

如上所述，我的资源的 IP 地址如下，客户端 - 172.19.59.36 服务器 - 172.20.58.236

我可以从浏览器通过客户端应用程序与后端服务器通信。这条路线有效，

http://172.19.59.36/api/greet

浏览器截图

正如预期的那样，我可以进入容器内部并获取相同的 url，并且它可以工作。

终端截图

问题是，当从 React 应用程序或编译的 javascript 块发送相同的请求时，我收到 CORS 错误，因为我猜它是在容器内生成的。该请求不会到达服务器。

错误的屏幕截图

在 index.html 中的 script 标记中，我添加了一个库，但浏览器也不会下载它。

库 URL 上脚本 404 中的库

请指导我纠正这个问题，我尝试了一些 nginx 配置来解决 CORS 块，但没有任何效果。

运行容器时端口映射如下，

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

我也提到了这一点。

提前致谢。

Answer 1

通过在客户端添加代理解决了问题。在反应的 package.json 文件中添加以下行解决了该问题。

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