本地WebSocket连接因内容安全策略(CSP)拦截报错如何解决？

报错原因 #

这个报错和你的WebSocket服务端代码无关，也不是必须使用wss安全连接才能运行，核心原因是你当前打开的浏览器页面配置了内容安全策略（CSP），其中connect-src规则限制了页面允许发起连接的目标地址，你手动在控制台执行的ws连接请求被该规则拦截了。
绝大多数公开站点都会配置严格的CSP规则，只允许页面连接自身业务域名的接口，禁止连接未授权的第三方地址，你在这类站点的控制台直接执行ws连接代码必然会触发该报错。

解决方法 #

• 方法1：本地新建空白HTML页面测试
  新建一个后缀为.html的空白文件，写入以下内容：

  <!DOCTYPE html>
  <html>
  <body>WebSocket测试页</body>
  </html>
  

  双击打开该文件，在这个页面的控制台执行你的WebSocket连接代码即可，空白页面没有配置CSP规则，不会拦截请求。
• 方法2：临时禁用浏览器CSP（仅本地开发测试用）
  可以安装浏览器插件临时禁用当前页面的CSP规则，测试完成后记得关闭，避免影响日常浏览的安全性。
• 方法3：业务页面适配
  如果你是在自己开发的业务页面中需要连接该ws服务，在页面的CSP配置的connect-src字段中添加ws://localhost:8080即可，生产环境使用wss协议的话替换为对应的wss地址。

验证方式 #

你可以先使用在线WebSocket测试工具连接本地的8080服务，如果可以正常连通，就说明你的服务端代码完全正常，仅存在前端页面CSP限制问题。

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