Question 81427 in Docker Question posted in
The official documentation can be found here.

Unable to load css while running django in docker

My docker-compose.yml

# pull official base image
FROM python:3.10-alpine

# set work directory
WORKDIR .

# set environment variables
ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

# install dependencies
RUN pip install --upgrade pip
COPY ./requirements.txt .
RUN pip install -r requirements.txt

# copy project
COPY . .

My Dockerfile is as follows:

services:
  app:
    build:
      context: .
    ports:
      - "8000:8000"
    command: >
      sh -c "python3 manage.py runserver 0.0.0.0:8000"
  redis:
    image: redis:alpine
  celery:
    restart: always
    build:
      context: .
    command: celery -A search worker -l info
    depends_on:
      - redis
      - app

The tree structure of my project directory is as follows:

├── Dockerfile
├── Procfile
├── books
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── __init__.py
│   ├── models.py
│   ├── templates
│   │   └── search.html
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── docker-compose.yml
├── manage.py
├── requirements.txt
├── search
│   ├── __init__.py
│   ├── asgi.py
│   ├── celery.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── templates
    ├── base.html
    ├── home.html
    └── registration
        ├── login.html
        └── logout.html

My settings is as follows:

ALLOWED_HOSTS = ['0.0.0.0', '127.0.0.1', 'localhost']
DISABLE_COLLECTSTATIC = 0

# Application definition

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "books.apps.BooksConfig",
    "debug_toolbar",
    "corsheaders",
    "django.contrib.postgres",
    "django_celery_beat",
]

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "corsheaders.middleware.CorsMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
    "debug_toolbar.middleware.DebugToolbarMiddleware",
    "whitenoise.middleware.WhiteNoiseMiddleware",
]
ROOT_URLCONF = "search.urls"
LOGIN_REDIRECT_URL = "home"
LOGOUT_REDIRECT_URL = "home"
CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (
    'http://localhost:8000',
    'https://localhost:8000',
    'http://0.0.0.0:8000',
    'https://0.0.0.0:8000',
    'http://127.0.0.1:8000',
    'https://127.0.0.1:8000'
)
TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [BASE_DIR / "templates"],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
        },
    },
]

STATIC_URL = "/static/"

If I access http://0.0.0.0:8000/admin/, the console says the following and the css does not load.

The Cross-Origin-Opener-Policy header has been ignored, because the URL's origin was untrustworthy. It was defined either in the final response or a redirect. Please deliver the response using the HTTPS protocol. You can also use the 'localhost' origin instead. See https://www.w3.org/TR/powerful-features/#potentially-trustworthy-origin and https://html.spec.whatwg.org/#the-cross-origin-opener-policy-header.
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I don't know if this is the best answer but this is what I have after trying a lot of things.

    I used https://stackoverflow.com/a/39291292

    It finally worked


  2. 0

    You may need to add SECURE_CROSS_ORIGIN_OPENER_POLICY = None to your settings file.

    Also, check to see that your middleware is declared in the correct order according to the whitenoise and corsheaders docs. For example:

    MIDDLEWARE = [
  ...
  'django.middleware.security.SecurityMiddleware',
  'corsheaders.middleware.CorsMiddleware',
  'whitenoise.middleware.WhiteNoiseMiddleware',
  ...
]

    The WhiteNoiseMiddleware doesn’t look like it should be at the bottom of the list, according to their docs.

    Login or Signup to reply.
  3. 0

    In your settings file:

    Add like this to load static.

    STATIC_URL = '/static/static/'
STATIC_ROOT = '/vol/web/static'
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search