使用来自 Docker 的 env 变量的 React 连接被拒绝错误答案

【问题标题】：Connection Refused Error on React using env Variables from Docker使用来自 Docker 的 env 变量的 React 连接被拒绝错误
【发布时间】：2020-10-18 11:12:33
【问题描述】：

我正在尝试在我的 docker 文件中定义一些环境变量，以便在我的 react 应用程序中使用它们：

接下来是我在Node服务器端的docker文件：

FROM node:lts-slim

RUN mkdir -p /app

WORKDIR /app
# install node_modules
ADD package.json /app/package.json
RUN npm install --loglevel verbose
# copy codebase to docker codebase
ADD . /app

EXPOSE 8081

# You can change this
CMD [ "nodemon", "serverApp.js" ]

这是我的 docker-compose 文件：

version: "3"
services:
  frontend:
    stdin_open: true
    container_name: firestore_manager
    build:
      context: ./client/firestore-app
      dockerfile: DockerFile
    image: rasilvap/firestore_manager
    ports:
      - "3000:3000"
    volumes:
      - ./client/firestore-app:/app
    environment:
      - BACKEND_HOST=backend
      - BACKEND_PORT=8081
    depends_on:
      - backend
  backend:
    container_name: firestore_manager_server
    build:
      context: ./server
      dockerfile: Dockerfile
    image: rasilvap/firestore_manager_server
    ports:
      - "8081:8081"
    volumes:
      - ./server:/app

这是我在反应代码中使用它的方式：

axios.delete(`http://backend:8081/firestore/`, request).then((res) => {....

但我收到连接被拒绝错误。我是 react 新手，不太确定如何实现这一目标。

有什么想法吗？

【问题讨论】：

标签： node.js reactjs docker environment-variables

【解决方案1】：

您请求服务的方式看起来不错：http://foo-service:port。
我认为您的问题是安全问题。
因为这两个应用程序不被认为在同一个来源（来源 = 域 + 协议 + 端口），所以你陷入了CORS (Cross Origin Resource Sharing) 要求。
在这种情况下，如果后端没有返回其同意预检 CORS 请求以与其他“来源”共享其资源，您的浏览器将不会接受执行您的 ajax 查询。
所以在后端启用 CORS 来解决这个问题（每个 api/framework 都有自己的方式）。
也许that post 可以帮助你的firebase。

【讨论】：

好像找不到服务器：net::ERR_NAME_NOT_RESOLVED