Web容器无法从docker compose调用后端容器

我仍在码头工人的世界中找到自己的立足点。我正在尝试将我的小宠物项目 Docker 化。前端是一个 vue-cli 应用程序，它与包含 spring boot 制作的 Restful API 的后端进行通信。

所以我的方法是为后端和前端声明两个单独的 dockerfile，并通过一个 docker compose 文件将它们组合起来。所以文件夹结构是 -

backend/
       - Dockerfile
frontend/
       - Dockerfile
docker-compose.yml

由于前端需要能够调用后端服务，因此我创建了一个桥接网络并在它们之间共享网络。这是我的 docker 撰写文件 -

version: "2"
services:
  backend:
    build: backend/.
    networks:
      - movie-network
    ports:
      - "8098:8098"
  frontend:
    build: frontend/.
    ports:
      - "8812:8080"
    networks:
      - movie-network

networks:
  movie-network:
    driver: bridge

我在后端暴露了一个端点，称为/api/findAll。现在，如果前端服务通过以下方式调用 APIhttp://localhost:8098:/api/findAll（主机网络），我可以从我的浏览器查看它（http://本地主机:8812 http://localhost:8812），一切正常。

但是如果前端使用相同的 API 调用backend:8098/api/findAll;利用桥接网络 - 它在我的浏览器中给出错误 -

如果我做一个docker exec前端ping后端，ping成功

那么，为什么它在我的浏览器中给出错误（http://本地主机:8812 http://localhost:8812）？我在概念上做错了什么吗？寻求建议。

前端 Dockerfile -

FROM node:lts-alpine

# install simple http server for serving static content
RUN npm install -g http-server

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app for production with minification
RUN npm run build

EXPOSE 8080

后端 Dockerfile -

FROM openjdk:11-jre-slim
# Creating app directory
WORKDIR /usr/src/movies
# Copying Jar (didn't use FROM maven to save some time)
COPY target/movies*.jar movies.jar

RUN pwd

RUN ls -la
# Exposing Port
EXPOSE 8098
# Running App
ENTRYPOINT ["java","-jar","/usr/src/movies/movies.jar"]

此设置的重要一点是，您的实际前端代码不是在 Docker 中运行，而是在浏览器中运行。这意味着它不了解 Docker 网络、容器或其他任何东西；您提供的 URL 必须能够到达主机上已发布的端口。这就是为什么localhost在这里工作（如果浏览器和容器在同一主机上运行）但是backend没有。

一种典型的方法是设置某种反向代理，它既可以托管前端应用程序代码，又可以代理后端应用程序。 （例如，设置 Nginx，其位置为/api route proxy_pass http://backend:8098，及其/路线要么try_files预构建的 Javascript 应用程序或proxy_pass http://frontend:8080.)

如果你这样做，那么e.g. http://localhost:8900是前端并且http://localhost:8900/api从浏览器的角度来看，是后端。这避免了 @coedycode 中暗示的 CORS 问题他们的答案 https://stackoverflow.com/a/60988610/10008173;但这也意味着前端代码可以使用相对URL/api（没有主机名）并回避整个问题。

+-------------+                  | Docker >           /     +----------+
+-------------+                  |                 /------> | frontend |
|             |  localhost:8900  |    +-------+    |        +----------+
|   Browser   | ---------------> | -> | nginx | -> +
|             |                  |    +-------+    | /api   +----------+
|             |                  |                 \------> | backend  |
+-------------+                  |                          +----------+