deploying angular 9 with django drf with docker - requests gets rejected - django

Question

Disclaimer: sorry for my bad english and I am new to angular, django and production.
I am trying to push the first draft of what I've made into a local production server I own running CentOS 7.
Up until now i was working in dev mode with proxy.config.json to bind between the Django and Angular so far so good.
{
"/api": {
"target": "example.me",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}
when I wanted to push to production however i failed to bind the container frontend with backend. these are the setup i made
Containerizing angular and putting the compiled files in an NGINX container -- port 3108
Containerizing Django and running gunicorn -- port 80
Postgres image
DockerFiles and Docker-compose
Django Dockerfile
FROM python:3.8
# USER app
ENV PYTHONUNBUFFERED 1
RUN mkdir /code
WORKDIR /code
ADD requirements.txt /code/
RUN pip install -r requirements.txt
ADD . /code/
Angular Dockerfile
FROM node:12.16.2 AS build
LABEL version="0.0.1"
WORKDIR /app
COPY ["package.json","npm-shrinkwrap.json*","./"]
RUN npm install -g #angular/cli
RUN npm install --silent
COPY . .
RUN ng build --prod
FROM nginx:latest
RUN rm -rf /usr/share/nginx/html/*
COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist/frontend /usr/share/nginx/html
EXPOSE "3108"
Docker-compose
version: '3'
services:
db:
image: postgres
environment:
- POSTGRES_DB=database_name
- POSTGRES_USER=postgres
- POSTGRES_PASSWORD=postgres
networks:
- app
backend:
build: .
command: gunicorn --bind 0.0.0.0:80 myproject.wsgi
volumes:
- .:/code
ports:
- "80:80"
networks:
- app
depends_on:
- db
frontend:
build:
context: ../frontend
dockerfile: Dockerfile
command: nginx -g "daemon off;"
ports:
- "3108:3108"
networks:
- app
depends_on:
- backend
networks:
app:
NGINX config file
server {
listen 3108;
server_name example.me;
root /usr/share/nginx/html;
location / {
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
I tried to mimic the the angular proxy by adding
following one answer from this post when he talked about docker
location /api {
proxy_pass example.me;
}
this resulted of the backend return Error 403
then I changed the BaseEndPoint to request directly from the server and added corsheaders to django and started getting a 401 Error.
environment.prod
export const environment = {
production: true,
ConfigApi: {
BaseEndPoint: 'example.me',
LoginEndPoint: '/api/account/login/',
RegisterEndPoint: '/api/account/registration/',
MembersList: '/api/membres_list/',
Meeting: '/api/meeting/create_list/',
TaskList: '/api/task_list/create/',
}
};
I can't point out the issue or its source; i should point out that request from Postman to the backend works just fine.
TL;DR
Backend keeps rejecting Frontend requests with 403 or 401 and i don't know why