GitHub Codespaces中Express应用HTTP服务配置问题求助

核心原因 #

GitHub Codespaces的预览页面（preview.app.github.dev域名）强制使用HTTPS协议加载，即使你将端口设置为HTTP，外部访问的页面依然是HTTPS环境。此时客户端用ws://发起WebSocket连接会触发浏览器的混合内容安全策略，被直接拦截。

解决方案：自动适配WebSocket协议 #

修改客户端client.js中的WebSocket初始化代码，根据当前页面的协议自动选择ws:或wss:，无需硬编码或区分环境：

// 替换原来的固定ws://连接代码
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const socket = new WebSocket(`${protocol}//${window.location.host}/api`);

为什么不需要修改服务端 #

GitHub Codespaces的端口转发代理会自动处理协议转换：

• 外部的wss://请求会被代理转发到你容器内的ws://服务
• 本地Dev Container环境下，页面用HTTP加载，自动使用ws://连接，和原来的逻辑完全一致

这样修改后，本地Dev Container和GitHub Codespaces的运行效果完全相同，不需要额外的环境判断或证书配置。

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