Vue前端连接Django Channels WebSocket失败问题排查求助

针对Vue在Docker外部运行时无法连接Django Channels WebSocket的问题，按以下步骤逐一排查修复：

1. 检查Docker端口映射与ASGI监听地址 #

• 确保Django容器的ASGI服务端口（默认8000）已映射到宿主机：
  在docker-compose.yml或docker run命令中添加端口映射：

  ports:
    - "8000:8000"
  

• 启动ASGI服务时必须监听0.0.0.0而非localhost，否则容器外部无法访问：
  启动命令示例：

  daphne -b 0.0.0.0 -p 8000 your_project.asgi:application
  

2. 修正Django Channels跨域配置 #

Vue的npm run serve默认运行在localhost:8080，属于跨域访问，需配置Channels允许跨域：

• 安装依赖：

  pip install channels-cors-headers
  

• 在settings.py中添加配置：

  INSTALLED_APPS = [
      # 其他应用
      'channels_cors_headers',
  ]
  
  MIDDLEWARE = [
      'channels_cors_headers.middleware.CorsMiddleware',  # 放在中间件列表最前面
      # 其他中间件
  ]
  
  # 开发环境允许所有来源，生产环境替换为具体域名
  CORS_ALLOW_ALL_ORIGINS = True
  CORS_ALLOW_CREDENTIALS = True
  
  CHANNELS_CORS_ALLOWED_ORIGINS = [
      "http://localhost:8080",
      "http://127.0.0.1:8080",
  ]
  

3. 确认Channels路由与ASGI配置 #

检查asgi.py是否正确挂载WebSocket路由：

import os
from django.core.asgi import get_asgi_application
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.auth import AuthMiddlewareStack
import your_app.routing

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'your_project.settings')

application = ProtocolTypeRouter({
    "http": get_asgi_application(),
    "websocket": AuthMiddlewareStack(
        URLRouter(
            your_app.routing.websocket_urlpatterns
        )
    ),
})

确保your_app/routing.py中已定义正确的WebSocket路径：

from django.urls import path
from . import consumers

websocket_urlpatterns = [
    path('ws/notifications/', consumers.NotificationConsumer.as_asgi()),
]

4. 修正前端WebSocket连接地址 #

避免硬写地址，根据环境动态生成：

// 区分HTTP/HTTPS对应的WebSocket协议
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
// 开发环境可通过环境变量配置，默认指向宿主机8000端口
const wsHost = process.env.VUE_APP_WS_HOST || 'localhost:8000';
const socket = new WebSocket(`${wsProtocol}//${wsHost}/ws/notifications/`);

在Vue项目的.env.development文件中添加：

VUE_APP_WS_HOST=localhost:8000

5. 检查Redis通道层配置 #

Channels依赖Redis作为消息中间件，确保settings.py中配置正确指向Docker内的Redis服务：

CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            "hosts": [('redis', 6379)],  # 使用Docker Compose中的Redis服务名作为主机名
        },
    },
}

注意：不要用localhost作为Redis主机名，否则Django容器会访问自身而非Docker内的Redis服务。

6. 测试WebSocket服务可用性 #

用curl命令直接测试后端WebSocket是否正常响应：

curl -i -N -H "Connection: Upgrade" -H "Upgrade: websocket" -H "Host: localhost:8000" -H "Origin: http://localhost:8080" -H "Sec-WebSocket-Key: SGVsbG8sIHdvcmxkIQ==" -H "Sec-WebSocket-Version: 13" http://localhost:8000/ws/notifications/

如果返回101 Switching Protocols，说明后端服务正常，问题出在前端配置；若连接失败，需重新检查后端ASGI、端口映射及Redis连接。

内容的提问来源于stack exchange，提问作者Touil Ahmed Imad