node.js - 使用来自 Docker 的 env 变量的 React 连接被拒绝错误

Question

我正在尝试在我的 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

这是我在 react 代码中使用它的方式:

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

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

Answer 1

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