reactjs - 如何从 nginx & react 容器发送请求到 spring boot 容器？

问题描述

我有两个 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;
        }
    }
}

我为配置文件引用了这个和这个。

我用于后端的 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 并且它可以工作。

终端截图

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

错误截图

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

库 URL 上脚本404 中的库

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

运行容器端口映射如下，

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

我也提到了这个。

提前致谢。

标签： reactjsspring-bootdockernginxcors

reactjs - 如何从 nginx & react 容器发送请求到 spring boot 容器？

问题描述

解决方案

推荐阅读