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

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

和预期的一样，我可以进入容器并获取相同的网址，并且可以正常工作。

A screenshot of the terminal

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

Screenshot of the error

在script.tag的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/",

如何从Nginx和React容器向Spring Boot容器发送请求？

1 个答案: