iOS Safari与Chrome拦截Django Channels WebSocket连接问题求助

这个问题我之前也踩过坑，核心原因是iOS上的WebKit内核浏览器（包括Safari和iOS版Chrome）在生产环境下会强制拦截非安全的WebSocket（ws://）连接——这是苹果出于安全合规性的硬性要求，只有通过HTTPS加密的WebSocket（wss://）才会被允许建立连接。Ecosia能正常运行大概率是它的浏览器内核有特殊适配逻辑，但这不是通用方案，我们得从根源上解决。

下面是具体的解决步骤：

1. 生产环境：切换到wss://（必须配置HTTPS） #

首先你的网站必须先启用HTTPS，因为wss是WebSocket over TLS，依赖HTTPS的加密通道。接下来需要配置反向代理（比如Nginx）来转发wss请求到Django Channels的ASGI服务器，同时处理HTTPS流量。

Nginx配置示例 #

server {
    listen 443 ssl;
    server_name your-domain.com;

    # 替换成你的SSL证书路径
    ssl_certificate /etc/nginx/ssl/your-domain.crt;
    ssl_certificate_key /etc/nginx/ssl/your-domain.key;

    # 常规HTTP请求转发到Django
    location / {
        proxy_pass http://127.0.0.1:8000;
        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;
    }

    # WebSocket请求转发到Channels的ASGI服务
    location /ws/ {
        proxy_pass http://127.0.0.1:8001; # 假设你的ASGI服务运行在8001端口
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        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;
        # 可选：增加超时时间避免连接被过早断开
        proxy_connect_timeout 7d;
        proxy_send_timeout 7d;
        proxy_read_timeout 7d;
    }
}

前端和Django配置调整 #

• 前端的WebSocket连接地址要从ws://your-domain.com/ws/改成wss://your-domain.com/ws/。
• 确保Django Channels的ASGI服务（比如用daphne或uvicorn）正常监听指定端口（上面示例的8001），asgi.py配置无需额外修改，只要保证能正常处理WebSocket路由即可。

2. 本地开发环境：临时启用HTTPS #

如果是在本地开发，需要让iOS设备能访问你的开发服务器的wss连接，可以用以下两种方式：

方式一：用mkcert生成本地自签名证书 #

1. 安装mkcert（一个生成可信本地证书的工具）：

   # macOS可以用brew安装
   brew install mkcert
   mkcert -install # 安装本地根证书到系统信任列表
   

2. 在项目根目录生成证书：

   mkcert localhost 192.168.x.x # 替换成你的本地IP
   

3. 用daphne启动ASGI服务时指定证书：

   daphne -e ssl:8001:privateKey=./localhost-key.pem:certKey=./localhost.pem your_project.asgi:application
   

4. 在iOS设备上访问https://192.168.x.x:8001，并信任mkcert的根证书（iOS设置→通用→VPN与设备管理→找到mkcert的证书并信任）。之后前端就能用wss://192.168.x.x:8001/ws/建立连接了。

方式二：用ngrok暴露本地服务为HTTPS #

ngrok可以把本地HTTP服务转换成公网HTTPS服务，这样iOS设备就能直接访问wss连接：

ngrok http 8000 # 假设Django运行在8000端口

ngrok会生成一个类似https://xxxx-xx-xx-xx-xx.ngrok.io的地址，前端用wss://xxxx-xx-xx-xx-xx.ngrok.io/ws/连接即可，无需额外配置证书。

3. 额外注意事项 #

• 避免混合内容：确保网站的所有资源（包括JS、CSS、WebSocket）都使用HTTPS，iOS会拦截混合了HTTP和HTTPS的请求。
• 检查iOS版本：虽然现在主流iOS版本都强制wss，但如果是旧版本（比如iOS 10及以下），可能有不同的政策，但建议优先适配最新版本。
• PWA适配：如果你的应用是PWA，确保manifest.json中的start_url和scope都是HTTPS地址，否则可能影响WebSocket连接。

如果还是有问题，可以查看Nginx的错误日志（/var/log/nginx/error.log）或者Daphne的运行日志，排查连接转发过程中的错误。

内容的提问来源于stack exchange，提问作者Ivan Pouradier Duteil