axios 前端无法连接到Docker中的后端API

nwlls2ji  于 2023-04-20  发布在  iOS
关注(0)|答案(1)|浏览(206)

我有3个docker容器都通过docker-compose运行。后端和数据库容器可以很好地相互通信。但是前端容器无法到达后端容器。所有3个容器都在同一个网络上。我可以通过https://localhost:5001/api/health向docker“后端”API发送Postman请求,它会给我预期的数据。
然而,当我使用相同的链接甚至使用docker别名将我的前端连接到后端时,它会给我一个“Connection Refused”错误。
这是我的docker文件。

DOCKER-COMPOSE.yml

version: '3.4'

networks:
  dockerapi-dev:
    driver: bridge

services:
  backend:
    image: backend
    build:
      context: .
      dockerfile: Backend/Dockerfile
    ports:
        - "5001:443"
    environment:
        DB_CONNECTION_STRING: "host=postgres_image;port=5432;database=db;username=user;password=password"
    networks:
    - dockerapi-dev

  postgres_image: 
    image: ${DOCKER_REGISTRY-}postgres:latest
    ports:
        - "5432:5432"
    restart: always
    volumes:
        - db_volume:/var/lib/postgres/data
    environment:
      POSTGRES_USER: "user"
      POSTGRES_PASSWORD: "password"
      POSTGRES_DB: "db"
    networks:
        - dockerapi-dev
  app:
    container_name: frontend
    build:
      context: ./
      dockerfile: ./frontend/.docker/app/Dockerfile
    env_file:
      - ./frontendt/.env
    ports:
      - 4000:4000
    volumes:
        - ./database:/app/database
        - ./logs/:/app/logs
        - ./assets:/app/assets
    restart: always
    networks:
      - dockerapi-dev
volumes:
  db_volume:

后端Docker文件

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base

WORKDIR /app
EXPOSE 80
EXPOSE 443

FROM mcr.microsoft.com/dotnet/sdk:6.0 AS build
WORKDIR /src
COPY ["./Backend/Backend.csproj", "Backend/"]

RUN dotnet restore "Backend/Backend.csproj"

COPY . .
WORKDIR "/src/Backend"
RUN dotnet build "Backend.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "Backend.csproj" -c Release -o /app/publish

FROM base AS final
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "Backend.dll"]`

**FRONTEND DOCKER FILE**

`## build runner
FROM node:16.17-buster-slim as build-runner

WORKDIR /tmp/app

COPY ./frontend/package.json .
COPY ./frontend/package-lock.json .
COPY ./frontend/src ./src

RUN npm install

COPY ./frontend/.swcrc .
COPY ./frontend/tsconfig.json .

RUN npm run build

FROM node:16.17-buster-slim as prod-runner

ARG NODE_ENV=production
ENV NODE_ENV $NODE_ENV

WORKDIR /app

COPY --from=build-runner /tmp/app/package.json /app/package.json
COPY --from=build-runner /tmp/app/package-lock.json /app/package-lock.json

COPY --from=build-runner /tmp/app/build /app/build

RUN npm ci --omit=dev && npm cache clean --force 

CMD ["node", "build/main.js"]

在我的前端代码中,我使用docker容器名称发出axios请求。

axios.get(`http://backend:5000/api/health`)

但我得到以下错误

AxiosError: connect ECONNREFUSED 172.22.0.3:5000

但是,如果我使用此URL从我的机器发出Postman请求,它将按预期工作。

https://localhost:5001/api/health

我已经尝试了许多不同的东西,现在不知所措,任何帮助将不胜感激!

eblbsuwk

eblbsuwk1#

看起来像是CORS问题,部署到docker后,前端的origin发生了变化,可以尝试修改后端的asp.netcore-api program.cs,让所有origin都能看到是否正常工作。

builder.Services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
{
    builder
        .AllowAnyOrigin()
        .AllowAnyHeader()
        .AllowAnyMethod();
}));
...
app.UseHttpsRedirection();
app.UseCors("CorsPolicy");
...

如果是这个问题,那么你需要尝试只允许正确的origins

builder.Services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
{
    builder.WithOrigins("http://127.0.0.1:5500").AllowAnyHeader().AllowAnyMethod();  //for front-end host at 127.0.0.1:5500
}));

相关问题