Docker用react app编写网络问题答案

【问题标题】：Docker compose networking issue with react appDocker用react app编写网络问题
【发布时间】：2020-01-20 23:45:19
【问题描述】：

我正在使用 docker-compose 运行一个反应应用程序和一个 json 服务器。

通常我通过以下方式从我的 react 应用程序连接到 json 服务器：


fetch('localhost:8080/classes')
    .then(response => response.json())
    .then(classes => this.setState({classlist:classes}));

这是我的 docker-compose 文件：

version: "3"
services:
    frontend:
        container_name: react_app
        build:
            context: ./client
            dockerfile: Dockerfile
        image: praventz/react_app
        ports:
            - "3000:3000"
        volumes:
            - ./client:/usr/src/app
    backend:
        container_name: json_server
        build:
            context: ./server
            dockerfile: Dockerfile
        image: praventz/json_server
        ports:
            - "8080:8080"
        volumes:
            - ./server:/usr/src/app

问题是我似乎无法让我的 react 应用程序从 json 服务器获取此信息。

在我的本地机器上，我使用 192.168.99.100:3000 来查看我的 react 应用

我使用 192.168.99.100:8080 来查看 json 服务器，但我似乎无法将它们与以下任何一个连接：

backend:8080/classes

json_server:8080/classes

backend/classes

json_server/classes

{host:"json_server/classes", port:8080}

{host:"backend/classes", port:8080}

使用 docker-compose up，react 应用程序和 json 服务器都可以独立运行。

我应该在 fetch() 中放入什么？

【问题讨论】：

错误是什么？你试过http://0.0.0.0:8080/classes吗？
您是否尝试在您的 JSON 服务器中启用 CORS？因为你有两个容器化的服务器，所以理论上，如果没有启用 CORS，你可能会出错。
这会产生：未处理的拒绝（TypeError）：无法在“窗口”上执行“获取”：无法从 0.0.0.0:8080/education 解析 URL
我不确定如何启用 CORS，您能详细说明一下吗？

标签： node.js json reactjs docker-compose

【解决方案1】：

请记住，React 应用程序总是在某些用户的浏览器中运行；它不知道涉及到 Docker，也无法访问或使用任何与 Docker 相关的网络设置。

在我的本地机器上，我使用 [...] 192.168.99.100:8080 查看 json 服务器

那么这也是您在 React 应用程序中所需要的。

您可以考虑在此之前设置某种代理，例如，将以/api 开头的 URL 路径转发到后端容器，并将其他 URL 转发到前端容器（或者更好的是，运行一个工具像 Webpack 将你的 React 应用程序编译成静态文件并直接提供服务）。如果你有这样的设置，那么 React 应用程序可以使用没有主机的路径 /api/v1/...，它将相对于浏览器认为的“当前主机”进行解析，通常应该是代理。

【讨论】：

感谢您的解释，不幸的是，甚至没有把 ip 工作。我不确定是什么问题，如果我找到解决方案会更新这篇文章。

【解决方案2】：

您有两种解决方案：

在 Express 服务器上使用 CORS，请参阅 https://www.npmjs.com/package/cors
使用 NGINX 设置代理/反向代理

【讨论】：