Angular本地环境WebSocket连接失败与代理配置问题排查

• Angular项目通过proxy.config.js配置代理后，localhost环境下WebSocket连接失败，但GET/POST/PUT/DELETE等API请求、网站其他功能均正常
• 请求源为https://com-name.example-dev.net时，WebSocket可正常建立连接
• 临时解决方案：修改本地hosts文件映射127.0.0.1 com-name.example-dev.net，通过该域名访问本地项目可正常连接WebSocket，但每次开发需手动修改、结束后删除，操作繁琐

现有配置 #

.env环境变量 #

// dev
PROXY_TARGET=https://api.example-dev.net
HEADER_ORIGIN="https://com-name.example-dev.net"
WEBSOCKET_TARGET=wss://api.example-dev.net

proxy.config.js代理配置 #

const path = require('path');
const dotenv = require('dotenv');
const { log } = require('console');

dotenv.config({ path: path.join(__dirname, `./.env`) });

const PROXY_CONFIG = {
  '/api/**': {
    target: process.env.PROXY_TARGET,
    changeOrigin: true,
    logLevel: 'debug',
    pathRewrite: {},
    secure: false,
    ws: true,
    headers: { origin: process.env.HEADER_ORIGIN || 'localhost:80' },
    cookieDomainRewrite: { '*': 'localhost' }
  },
};

module.exports = PROXY_CONFIG;

package.json启动脚本 #

{
  "script": {
    "start": "run-p \"start:nx {1} --open --port {2} --host 0.0.0.0\" --"
  }
}

1. 检查代理配置遗漏项 #

当前代理配置虽开启了ws: true，但WebSocket代理逻辑可能需要针对性调整：

• 如果WebSocket请求路径不是/api/**开头，需单独添加代理规则：

  '/ws/**': {
    target: process.env.WEBSOCKET_TARGET,
    changeOrigin: true,
    ws: true,
    headers: { origin: process.env.HEADER_ORIGIN },
    secure: false
  }
  

• 确认/api/**规则覆盖WebSocket路径时，headers.origin是否在握手阶段被正确传递——WebSocket服务会校验Origin头，这是连接成功的关键。

2. 替代hosts修改的便捷方案 #

无需手动修改hosts，可通过以下方式简化操作：

• Windows平台：使用Hosts File Editor可视化工具一键切换配置；或编写bat脚本快速添加/删除映射：

  :: 添加映射
  echo 127.0.0.1 com-name.example-dev.net >> C:\Windows\System32\drivers\etc\hosts
  :: 删除映射
  findstr /v "com-name.example-dev.net" C:\Windows\System32\drivers\etc\hosts > temp_hosts && move /y temp_hosts C:\Windows\System32\drivers\etc\hosts
  

• 跨平台方案：用dnsmasq（Linux/macOS）或Acrylic DNS Proxy（Windows）配置本地域名解析，直接将指定域名指向127.0.0.1，无需修改hosts。

3. 是否需要后端调整配置？ #

WebSocket的跨域校验和HTTP的CORS规则不同：

• WebSocket握手阶段会检查Origin请求头，服务端需将该Origin加入白名单，而非设置Access-Control-Allow-Origin头（该头仅作用于HTTP请求）。
• 需联系WebSocket服务开发人员，将http://localhost:PORT（你的本地开发端口）添加到服务端的Origin允许列表，这样直接用localhost访问时，握手请求会被服务端认可，即可正常建立连接。

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