Docker中运行Django时无法加载CSS的问题求助

在Docker环境运行Django项目时，访问http://0.0.0.0:8000/admin/出现CSS无法加载的情况，浏览器控制台提示：

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.

相关配置文件 #

Dockerfile

# 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 . .

docker-compose.yml

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

项目目录结构

├── 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

settings.py 关键配置

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

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",
]

STATIC_URL = "/static/"

解决方法 #

1. 改用localhost访问

浏览器对0.0.0.0的信任度低于localhost，直接访问http://localhost:8000/admin/，可直接解决跨源相关的静态资源加载问题。

2. 配置静态文件收集与服务

Django默认不会自动收集静态文件到统一目录，Docker环境下需手动配置：

• 在settings.py中添加静态文件根目录：

  STATIC_ROOT = BASE_DIR / 'staticfiles'
  

• 修改Dockerfile，添加收集静态文件的命令：

  # 收集静态文件
  RUN python manage.py collectstatic --noinput
  

• 确保Whitenoise中间件顺序在SecurityMiddleware之后（当前配置已符合要求）。

3. 禁用Cross-Origin-Opener-Policy头（开发环境可选）

如果必须使用0.0.0.0访问，可在settings.py中添加：

SECURE_CROSS_ORIGIN_OPENER_POLICY = None

此设置会禁用该头的检测，避免浏览器警告，但仅建议开发环境使用，生产环境优先使用HTTPS+可信域名。

4. 挂载本地静态文件卷（开发环境）

在docker-compose.yml的app服务中添加卷映射，确保本地静态文件实时同步到容器：

services:
  app:
    # ... 其他配置
    volumes:
      - .:/code

同时将Dockerfile中的WORKDIR .改为WORKDIR /code，保持路径统一。

内容的提问来源于stack exchange，提问作者Echchama Nayak