VPS上Django的ALLOWED_HOSTS与CORS_ALLOWED_ORIGINS配置失效求助

环境与问题现象 #

• VPS系统：Ubuntu 22.04，已安装Nginx
• 架构：前端Angular + 后端Django/DRF + Daphne(WebSocket)，通过Docker Compose部署
• 异常现象：访问IP:8081或域名:8081可正常显示Angular页面；访问IP:8082时触发DisallowedHost错误，提示Invalid HTTP_HOST header: 'ip-address'. You may need to add 'ip-address' to ALLOWED_HOSTS
• 本地Docker/非Docker环境运行正常，仅VPS部署出现问题

当前关键配置 #

Django settings.py #

ALLOWED_HOSTS = ['localhost', 'ip:8082', '127.0.0.1', 'domain_name:8082', '*',]

CORS_ALLOWED_ORIGINS = [
    'http://localhost:8081', # 允许Angular请求
]

Nginx 默认站点配置（/etc/nginx/sites-enabled/default） #

server {
        listen                8080;
        root                  /var/www/www-root/data;
        index                 index.html;
        server_name           _;

        location / {                                                                                                 
                try_files $uri $uri/ =404;
                proxy_pass http://ip-address:8082;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
        }
}

docker-compose.yml #

version: "3"

services:
  # Back-end
  django:
    build:
      context: ./back-end
      dockerfile: ./Dockerfile
    image: django-image
    volumes:
      - backend_code:/api
    command: python manage.py runserver 0.0.0.0:8082
    container_name: django
    ports:
      - "8082:8082"
    
  # Websocket
  daphne:
    image: django-image
    volumes:
      - backend_code:/api
    command: daphne -p 8001 -b 0.0.0.0 api.asgi:application
    container_name: daphne
    depends_on:
      - django
    ports:
      - "8001:8001"

  # Front-end
  angular:
    build:
      context: ./front-end
      dockerfile: ./Dockerfile
    image: angular-image
    command: ng serve --port 8081 --host 0.0.0.0
    container_name: angular
    depends_on:
      - django
    ports:
      - "8081:8081"

volumes:
  backend_code:

问题排查与修复方案 #

1. ALLOWED_HOSTS 配置错误 #

• 核心问题：ALLOWED_HOSTS只需填写主机名/IP，不需要带端口。当访问IP:8082时，HTTP_HOST头是纯IP（不带端口），但你的配置里没有纯IP项，导致匹配失败。
• 修复：修改settings.py中的ALLOWED_HOSTS：

ALLOWED_HOSTS = ['localhost', '127.0.0.1', '你的VPS公网IP', '你的域名', '*',]

• 注意：生产环境不建议用*，可先用来验证问题，后续替换为具体IP和域名。

2. Nginx配置冲突（未预期的代理） #

• 你声明未将Nginx用作代理，但当前配置中Nginx的8080端口会将请求代理到http://ip-address:8082，且设置了Host $host，导致Django收到的Host是VPS的IP/域名（不带端口），同样触发ALLOWED_HOSTS错误。如果不需要该配置，直接删除或注释掉整个server块，然后重启Nginx：

sudo systemctl restart nginx

3. CORS配置问题（Angular无法连接后端） #

• 当前CORS_ALLOWED_ORIGINS仅允许http://localhost:8081，但VPS上的Angular通过http://IP:8081或http://域名:8081访问，需将这两个地址加入配置：

CORS_ALLOWED_ORIGINS = [
    'http://localhost:8081',
    'http://你的VPS公网IP:8081',
    'http://你的域名:8081',
]

• 对于WebSocket（Daphne），需确保Channels配置允许跨域，或临时设置CORS_ALLOW_ALL_ORIGINS = True验证（生产环境慎用）。

4. Docker镜像重建验证 #

• 修改settings.py后，需重新构建Django镜像以更新配置：

docker-compose build django
docker-compose up -d

• 若使用backend_code:/api卷挂载，需确认本地back-end目录下的settings.py已修改，卷挂载会自动同步到容器内。

验证步骤 #

1. 更新settings.py的ALLOWED_HOSTS和CORS_ALLOWED_ORIGINS
2. （可选）清理Nginx无效代理配置并重启服务
3. 重新构建Django镜像并重启容器
4. 访问IP:8082确认DisallowedHost错误消失
5. 测试Angular页面是否能正常调用后端API和WebSocket

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