ant-design-pro icon indicating copy to clipboard operation
ant-design-pro copied to clipboard

🧐[问题 | question]请问下怎么配置websocket代理

Open itzhoujun opened this issue 2 years ago • 4 comments

🧐 问题描述 | Problem description

配置websocket代理,但是无法连接

💻 示例代码 | Sample code

配置如下:

'/ws': {
      target: 'ws://localhost:8080',
      ws: true,
      logLevel: 'debug',
      secure: false,
    },

🚑 其他信息 | Other information

后端真实ws地址:ws://localhost:8080/ws/deploy,直接连接是ok的: image

端口改成8000,使用代理,但是一直处于连接中状态: image

OS: MAC OS

Node:16

浏览器 | browser:edge

itzhoujun avatar Jul 11 '22 03:07 itzhoujun

以下的 Issues 可能会帮助到你 / The following issues may help you

  • [#9981][🧐[问题 | question]][78%]
  • [#9968][🧐[问题 | question]umi4版本在配置base和publicPath后,history.location和useLocation()返回的pathname不同][74%]
  • [#9991][🧐[问题 | question]配置通用布局文件layout获取的props中为空对象配置通用布局文件layout获取的props中为空对象][73%]
  • [#10006][🧐[问题 | v4.5.0版本登录values参数为啥报这个?][68%]
  • [#10008][🧐[问题 | 升级v6后统一错误处理不弹出错误提示][67%]
  • [#9977][🧐[问题 | question] prov6的layout样式怎么和pro-layout组件的样式不一样][63%]
  • [#9966][🧐[问题 | question] 登录成功后出现弹窗验证如何做][63%]
  • [#9994][🧐[问题 | ant-design-pro ?] ][55.00000000000001%]
  • [#9998][默认安装都是typescript版本🧐[问题 | question]][52%]
  • [#9962][🧐[问题 | question] 切换菜单时, PageContainer的子元素由于高度变化会出现闪烁,你们一般怎么处理? ][48%]

github-actions[bot] avatar Jul 11 '22 03:07 github-actions[bot]

antd pro版本是:6.0.0-beta.1

itzhoujun avatar Jul 11 '22 05:07 itzhoujun

这么久了都没人解惑一下吗

itzhoujun avatar Jul 25 '22 02:07 itzhoujun

这么久了都没人解惑一下吗

这个代理使用的localhost,相当于你的http://127.0.0.1:8000/ws 代理了ws://localhost:8080/

wavesbig avatar Jul 26 '22 08:07 wavesbig

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成,可以尝试下方案,官方人员会在一定时间后继续继续处理。

你可以尝试将代理地址改成 ws://127.0.0.1:8080,则配置如下:

'/ws': {
  target: 'ws://127.0.0.1:8080',
  ws: true,
  logLevel: 'debug',
  secure: false,
},

这样就可以连接成功了。因为 localhost 与 127.0.0.1 在某些情况下并不相等,有可能会导致连接不上的情况。你也可以在控制台输出参数,查看接收到的参数是否符合预期。

另外,Ant Design Pro 6 有一些关于 WebSocket 代理的章节,可以了解一下:WebSocket 代理。

chenshuai2144 avatar Mar 07 '23 08:03 chenshuai2144

值得注意是的百分之二十的问题都可以用重装依赖来解决,所以你可以尝试一下: 删除 'node_modules' 文件夹 -> 删除 'package-lock.json'或 'pnpm-lock.yaml' 文件 -> 运行 'pnpm install' 或 'npm install' 命令

问题可能的解决方案如下:

  1. 确认后端 WebSocket 服务端口是否正确,是否正在监听 /ws/deploy 路径。可以使用 WebSocket 工具进行测试,确保后端 WebSocket 服务正常运行。

  2. 检查前端代理的配置。可以尝试以下几个方案:

    • target 改为完整的 WebSocket 地址:ws://localhost:8080/ws/deploy
    • secure 设置为 true,使用加密的 WebSocket 连接:secure: true
    • 修改 WebSocket 的路径为 /deploy'/ws': { target: 'ws://localhost:8080/deploy', ws: true, logLevel: 'debug', secure: false }
    • 将代理地址改为后端服务器的域名或 IP 地址:target: 'ws://your-backend-domain/ws/deploy'
  3. 检查浏览器的控制台输出信息,查看是否有任何错误信息。可以检查网络连接是否正常,是否有跨域问题,以及是否有其他报错信息。

  4. 检查浏览器的插件或防火墙设置,确保它们不会阻止 WebSocket 连接。

  5. 尝试在其他浏览器中打开页面,以确定是否是浏览器相关的问题。

  6. 如果以上步骤都没有解决问题,尝试升级或降级 Node.js 的版本,以及相关的库版本,以解决可能的兼容性问题。

希望以上解决方案能帮助到你解决问题。如果还有其他问题,请随时提问。

chenshuai2144 avatar Jan 23 '24 06:01 chenshuai2144