如何从 nginx 发送请求并将容器反应到 Spring Boot 容器？

Question

我有两个 docker 容器，它们的应用程序的前端和后端是分开的。

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

来自 React 前端的典型请求如下所示，

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

A screenshot of the browser

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

A screenshot of the terminal

问题是当从 react 发送相同的请求时 应用程序或编译的 javascript 块，我得到一个 CORS 错误，如 我猜它是在容器内生成的。此请求未到达服务器。

Screenshot of the error

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

Library in script 404 on the library URL

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

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

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

我也提到了this。

提前致谢。

Answer 1

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

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