Wsrtjtyk

I decided to dockerize an existing Django REST + Angular app today. The website is displaying as it should, however CORS requests are being blocked.

Access to XMLHttpRequest at 'http://localhost:8000/branches/1' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The angular App is dockerized using Nginx. I was using this tutorial in the progress (docker + compose files are listed below).

Strange thing about this is that I had this problem before and solved it through the use of the djang-cors-headers package. Along with CORS_ORIGIN_ALLOW_ALL = True, this no longer seems to be solving the issue.

Can this be related due to the fact that the application now runs in containers? I'm providing the dockerfiles for the projects along with the docker-compose file below. Not sure if they are relevant though.

Dockerfile for the Angular project:

FROM tiangolo/node-frontend:10 as build-stage

WORKDIR /app



COPY package*.json /app/

RUN npm install



COPY ./ /app/

ARG configuration=production

RUN npm run build -- --output-path=./dist/out --configuration $configuration



# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx

FROM nginx:1.15

COPY --from=build-stage /app/dist/out/ /usr/share/nginx/html



# Copy the default nginx.conf provided by tiangolo/node-frontend

COPY --from=build-stage /nginx.conf /etc/nginx/conf.d/default.confenter

Dockerfile for the Django REST project:

# Pull base image

FROM python:3.7



# Set environment varibles

ENV PYTHONDONTWRITEBYTECODE 1

ENV PYTHONUNBUFFERED 1



# create root directory

RUN mkdir /web



# set working directory

WORKDIR /web



# Coppy current directory contents into the container

ADD . /web/



# Install any needed packages in requirements.txt

RUN pip install -r requirements.txt

And the docker-compose.yml file:

version: '3'



services:

  db:

    image: mysql:5.7

    restart: always

    container_name: db

    environment:

      - MYSQL_HOST=localhost

      - MYSQL_PORT=3306  # cannot change this port to other number

      - MYSQL_ROOT_HOST=%

      - MYSQL_DATABASE=test

      - MYSQL_USER=belter

      - MYSQL_PASSWORD=belter_2017

      - MYSQL_ROOT_PASSWORD=123456_abc

    ports:

      - '3302:3306'



  web:

    build: ./orca/

    restart: always

    command: bash -c "python manage.py makemigrations && python manage.py migrate && python manage.py runserver 0.0.0.0:8000"

    container_name: web

    volumes:

      - ./orca:/code

    ports:

      - '8000:8000'

    depends_on:

      - db



  angular:

    build: ./ng-orca-new/

    container_name: angular

    ports:

      - '3000:80'

Thanks in advance!

Problem was due to nginx blocking the requests. Added the headers once again at that layer, yielding the following nginx.conf:

server {

  listen 80;

  location / 

    add_header "Access-Control-Allow-Origin" "*";

    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';

    add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Accept,Content-Type, Origin';



    root /usr/share/nginx/html;

    index index.html index.htm;

    try_files $uri $uri/ /index.html =404;

  }

}