如何在NextJS中转发/代理WebSocket请求至GraphQL后端？

首先，你当前的next.config.js重写配置可以支持WebSocket请求转发，但需要注意几个关键细节：

• Next.js从v12版本开始，内置的重写机制已经支持WebSocket（ws/wss协议）的代理转发，你的基础配置方向是对的。
• 要确保Next.js服务器运行在支持WebSocket的环境中：
  • 生产环境用next start启动的服务器，本身就支持WebSocket代理；
  • 开发环境的next dev也能处理WebSocket转发，注意本地端口和域名配置的一致性即可。
• 验证WebSocket转发是否生效的简单方法：
  1. 前端通过wss://a.com/graphql发起GraphQL订阅请求；
  2. 查看Spring Boot后端日志，确认是否收到WebSocket连接请求；
  3. 检查浏览器控制台的网络请求，确认WebSocket连接状态码为101 Switching Protocols，即连接成功建立。

如果遇到WebSocket转发失败，可排查以下几点：

• 确认Spring Boot后端的GraphQL订阅配置正确，允许https://a.com的跨域WebSocket连接（WebSocket的跨域需要单独配置，比如在Spring Security中设置允许的Origin）；
• 检查是否有其他路由规则优先匹配了/graphql路径，导致重写规则未生效；
• 如果使用了自定义服务器（如Express），默认的rewrites配置可能不生效，需要用http-proxy-middleware这类工具单独处理WebSocket代理。

补充：若你的Next.js版本低于v12，原生重写不支持WebSocket，需升级版本，或通过自定义服务器实现代理。

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