Reactjs 我应该在docker compose中运行的react应用程序中使用哪个API URL？

因此，我在docker compose中运行了以下内容：

version: "3.7"
services:
    api:
        stdin_open: true
        build:
            context: ../hikrr_API
            dockerfile: Dockerfile
        image: hikrr_api
        ports:
            - "4000:4000"
        volumes:
            - ../hikrr_API:/usr/src/
    gui:
        stdin_open: true
        build:
            context: ../hikrr_GUI
            dockerfile: Dockerfile
        image: hikrr_gui
        ports:
            - "3000:3000"
        volumes:
            - ../hikrr_GUI:/usr/src/

api只是一个express应用程序，gui是一个简单的react应用程序

在我的simple react应用程序的上下文中，我想向我的api发出axios请求

但是，我无法获得正确的URL

在文档（）之后，我得出结论，axios调用应该如下

axios({
            method: 'GET',
            url: 'http://hikrr_api://api:4000',
            params: {
                search: search,
                take: take,
                skip: skip
            },
            cancelToken: new CancelToken(c => {
                cancel = c;
            })
        })

由于映像名为“hikrr_api”，因此该服务名为“api”，并在端口4000上公开

但是，使用浏览器时，请求失败，并出现错误： “错误：getaddrinfo ENOTFOUND HIKRU api”

此请求的URL为：

curl 'http://hikrr_api//api:4000?search=&take=50&skip=0' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'Referer: http://localhost:3000/' \
  -H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36' \
  --compressed

---

我缺少什么？

React应用程序通常在Web浏览器中运行；它们不会在Docker中运行，即使它们是由基于容器的应用程序提供的

+------------------------------------+
|浏览者|
|获取…并运行它…调用|
+------------------------------------+
| http://server:3000    | http://server:4000
+------|-----------------------|-----+
|码头工人|
|  +-------+              +-------+  |
|| gui | | api ||
|  +-------+              +-------+  |
+------------------------------------+

由于这两个调用都来自Docker外部，因此都需要连接到服务器的DNS名称和两个服务的已发布的

端口：

。如果浏览器和容器在同一台主机上运行（并且您没有使用Docker Toolbox或其他基于VM的解决方案），您可以在此处使用

localhost

作为服务器的主机名

---

您可以想象一个设置，其中一个服务直接调用另一个服务；也许

gui

容器会调用

api

容器来生成一些种子数据，这些数据在提供给浏览器之前会预呈现为HTML。在这种情况下，您需要撰写服务名称和容器内进程侦听的端口，

http://api:4000

<代码>端口：在此处被忽略，并且图像名称不是URL的一部分。您无需明确设置

容器名称：

或

主机名：

，也无需将容器分配给非默认的

网络：

通常在Web浏览器中运行的React应用程序；它们不会在Docker中运行，即使它们是由基于容器的应用程序提供的

+------------------------------------+
|浏览者|
|获取…并运行它…调用|
+------------------------------------+
| http://server:3000    | http://server:4000
+------|-----------------------|-----+
|码头工人|
|  +-------+              +-------+  |
|| gui | | api ||
|  +-------+              +-------+  |
+------------------------------------+

由于这两个调用都来自Docker外部，因此都需要连接到服务器的DNS名称和两个服务的已发布的

端口：

。如果浏览器和容器在同一台主机上运行（并且您没有使用Docker Toolbox或其他基于VM的解决方案），您可以在此处使用

localhost

作为服务器的主机名

---

您可以想象一个设置，其中一个服务直接调用另一个服务；也许

gui

容器会调用

api

容器来生成一些种子数据，这些数据在提供给浏览器之前会预呈现为HTML。在这种情况下，您需要撰写服务名称和容器内进程侦听的端口，

http://api:4000

<代码>端口：在此处被忽略，并且图像名称不是URL的一部分。您无需明确设置

容器名称：

或

主机名：

，也无需将容器分配给非默认

网络：

尝试使用容器名称，如：

http://container-name:4000

。您可以在Docker compose文件中将其定义为

container\u name:container name

@lewislbr如果URL使用服务名称，则不需要

container\u name

指令。请尝试使用容器名称，如：

http://container-name:4000

。您可以在Docker compose文件中将其定义为

container\u name:container name

@lewisbr如果URL使用服务名称，则不需要

container\u name

指令。感谢您的详细说明！我已将axios更新为调用'htttp://api:4000“但是现在我得到了：net:：ERR_NAME_NOT_RESOLVED我有点困惑，就像你说react应用程序在docker之外运行那么这是否意味着我应该使用localhost:4000比api:4000更高？谢谢（很抱歉，docker compose完全是新手）react应用程序在“浏览器”中运行图中的框，在“Docker”框之外，不知道“api”主机名。感谢您的详细解释！我已将axios更新为调用'htttp://api:4000“但是现在我得到了：net:：ERR_NAME_NOT_RESOLVED我有点困惑，就像你说react应用程序在docker之外运行那么这是否意味着我应该使用localhost:4000比api:4000更高？谢谢（很抱歉，docker compose完全是新手）react应用程序在“浏览器”中运行在图中的“Docker”框之外，不知道“api”主机名。