CORS Issue with Nginx, Angular, and Flask in Docker container

General
1

I have an application with an architecture that includes Angular for the frontend, Flask for the backend, and Nginx as a proxy server. I have been encountering CORS issues with this setup, and I have been unable to resolve the problem despite several attempts.

Here is my docker-compose.yml:

version: '3.8'

services:
  web:
    image: nginx
    volumes:
      - ./nginx/nginx.conf:/tmp/nginx.conf
    environment: 
      - FLASK_SERVER_ADDR=backend:9091 
      - FRONT_SERVER_ADDR=front:4200
    command: /bin/bash -c "envsubst < /tmp/nginx.conf > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'" 
    ports:
      - 80:80
    depends_on:
      - backend
    networks:
      - mynetwork

  front:
    build:
      context: safer-webapp
      target: builder
    ports:
      - 4200:4200
    volumes:
      - ./safer-webapp:/project
      - /project/node_modules
    networks:
      - mynetwork

  backend:
    build:
      context: safer-ws
      target: builder
    stop_signal: SIGINT
    ports:
      - 9091:9091
    environment:
      - FLASK_SERVER_PORT=9091
    volumes:
      - ./safer-ws:/src
    depends_on:
      -  mongodb
    networks:
      - mynetwork

  mongodb:
    image: mongo:latest
    container_name: mongodb
    restart: always
    environment:
      - MONGO_INITDB_ROOT_USERNAME=root
      - MONGO_INITDB_ROOT_PASSWORD=root
    ports:
      - 27017:27017
    volumes:
      - mongodb_data:/data/db
      - ./mongodb/init-scripts:/docker-entrypoint-initdb.d
      - ./mongodb/csv:/csv
    networks:
      - mynetwork

volumes:
  mongodb_data:

networks:
  mynetwork:

Here is my nginx.conf file:

server {
    listen 80;

    location / {
        proxy_pass http://$FLASK_SERVER_ADDR;

      # Ajouter les en-têtes CORS
        add_header Access-Control-Allow-Origin $http_origin always;
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always;
        add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization" always;
        add_header Access-Control-Expose-Headers "Content-Length,Content-Range" always;
    }
}

He is my Flask file:

# syntax=docker/dockerfile:1.4
FROM --platform=$BUILDPLATFORM python:3.10-alpine AS builder

WORKDIR /src
COPY requirements.txt /src
RUN --mount=type=cache,target=/root/.cache/pip \
    pip3 install -r requirements.txt

COPY . .

CMD ["python3", "server.py"]

FROM builder as dev-envs

RUN <<EOF
apk update
apk add git
EOF

RUN <<EOF
addgroup -S docker
adduser -S --shell /bin/bash --ingroup docker vscode
EOF

COPY --from=gloursdocker/docker / /

CMD ["python3", "server.py"]

Here is my Angular file :

# syntax=docker/dockerfile:1.4

FROM --platform=$BUILDPLATFORM node:18.15-bullseye-slim as builder

RUN mkdir /project
WORKDIR /project

RUN npm install -g @angular/cli@13

COPY package.json package-lock.json ./
RUN npm ci

COPY . .
CMD ["ng", "serve", "--host", "0.0.0.0"]

FROM builder as dev-envs

RUN <<EOF
apt-get update
apt-get install -y --no-install-recommends git
EOF

RUN <<EOF
useradd -s /bin/bash -m vscode
groupadd docker
usermod -aG docker vscode
EOF

COPY --from=gloursdocker/docker / /

CMD ["ng", "serve", "--host", "0.0.0.0"]

Access to XMLHttpRequest at ‘http://localhost:9091/api/crash’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I have already tried the following solutions:

Using the Flask-CORS library in my Flask application.
Modifying the nginx.conf file in various ways to handle CORS headers.
Creating a proxy.conf.json file in my Angular application.

Unfortunately, none of these attempts have resolved the CORS issue. What do I need to do to fix this CORS issue between my Angular application and my Flask server using Nginx as a proxy server? Thank you in advance for your help.

2

hey have you able to figured it out yet?

1 Like