CORS blocked in dockerized Django REST + Angular project

Question

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!

LaurensVijnck LaurensVijnck · Accepted Answer · 2018-11-20T23:48:12

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;
  }
}

CORS blocked in dockerized Django REST + Angular project

1 Answers