ReactJS 浏览器应用程序无法看到 Docker Compose 网络中的内容

IT技术 reactjs docker axios
2021-04-21 06:50:57

我有一个带有自己的 Dockerfile 的 ReactJS 项目，暴露了端口 3000:3000。

我还有一个 PHP 项目，它有自己的 Dockerfile，暴露了 80:80 端口。PHP 应用程序还有用于 MySQL、Redis 和 Nginx 的容器

对于 PHP 应用程序，我有一个 docker-compose 文件，它my-net为 PHP、Nginx、MySQL 和 Redis创建了一个网络 ( ) 以进行通信。但是，我现在希望 ReactJS（在一个单独的项目中）能够与 PHP 应用程序进行通信。

我在 React 项目中添加了一个 docker-compose 文件，并将它从 PHP 项目添加到网络中，my-net并声明为external这样它就不会尝试创建它。

这似乎有效：从 ReactJS 容器，我可以 ping app（我的后端服务的名称）并且它正常工作。不过，从ReactJS代码，如果我使用类似axios尝试，并击中了后端API，它并不能解决app或http://app或任何变化。但是，如果我将其替换为axios.

所以主机名解析似乎存在一些问题，大概这是在axios/ JavaScript 端。有什么我遗漏的或不起作用的原因吗？

1个回答

当 JavaScript 在浏览器（Docker 之外）中运行时，您无法使用，app因为它仅在 Docker 网络内部可用（通过嵌入式 DNS 服务器）。

要从外部访问 PHP 服务器，请改用 localhost 和暴露的端口 (80)。

如果您没有在反应容器内使用服务器端渲染或代理，则这与反应容器无关。您可以通过 localhost:80 上的公开端口访问您的 PHP 服务器（之前在浏览器中检查您的 PHP 服务器是否可以访问）。对于访问其他端口的 javascript，您必须启用 CORS，但您可以先检查开发人员工具是否正常工作。
2021-05-24 06:50:57
ReactJS (javascript) 正在向 PHP 应用程序发出请求。所以流程是：我在浏览器中访问 localhost:3000，这是 ReactJS 的公开端口。当我点击该端点时，React 会向 PHP 容器发出请求，或者至少尝试这样做。这是失败的部分。尽管我可以从 ReactJS 容器 ping PHP 应用程序，但当我尝试使用 axios 从 Javascript 代码发出请求时，它无法解析主机
2021-06-02 06:50:57
@djt：您可能想要查看的一件事是前端代理，以便您可以将所有服务（SPA、AJAX、WS）放在一个端口上，然后在内部重新路由它们。这允许您在标准端口（80、443）上运行它们，以在生产环境中获得最大的可靠性。您可以在 Docker Compose 配置中将代理作为另一个容器运行。
2021-06-02 06:50:57
请求是来自 reactjs/浏览器还是来自反应容器中的其他东西？我认为反应容器只是一个静态文件服务器。
2021-06-04 06:50:57
不确定我是否遵循。我正在尝试从浏览器访问 React 应用程序，该浏览器正在内部访问 PHP 应用程序。但是当我这样做时，React 似乎无法连接到 PHP 应用程序
2021-06-06 06:50:57
其它你可能感兴趣的问题
上一篇如何让 Font Awesome 5 与 React 一起使用？ 下一篇无法在 React 应用程序中禁用指针事件