ReactJS开发环境连接Spring Websocket出现ECONNRESET代理错误

1. 修复Spring端的消息转换器警告 #

Spring抛出的HttpMessageNotWritableException是核心问题根源——它无法将LinkedHashMap序列化为text/event-stream类型响应，直接导致SockJS握手或消息传输时连接异常断开。

• 配置支持text/event-stream的消息转换器：
  在WebSocket配置类中添加Jackson消息转换器，并指定支持的媒体类型：

  @Configuration
  @EnableWebSocketMessageBroker
  public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
  
      @Override
      public void configureMessageConverters(List<MessageConverter> converters) {
          MappingJackson2MessageConverter jacksonConverter = new MappingJackson2MessageConverter();
          jacksonConverter.setSupportedMediaTypes(Arrays.asList(
              MediaType.APPLICATION_JSON,
              MediaType.TEXT_EVENT_STREAM // 新增对该类型的支持
          ));
          converters.add(jacksonConverter);
      }
  
      // 确保SockJS端点配置正确
      @Override
      public void registerStompEndpoints(StompEndpointRegistry registry) {
          registry.addEndpoint("/websocket")
                  .withSockJS();
      }
  
      // 其他WebSocket消息代理配置...
  }
  

• 检查EditorObject类：确保它有无参构造函数，字段能被Jackson正确序列化（必要时添加@JsonProperty注解）。

2. 替换React开发环境的代理配置 #

Create React App默认的proxy字段不支持WebSocket/SockJS的完整代理逻辑，改用http-proxy-middleware实现可靠代理：

• 安装依赖：

  npm install http-proxy-middleware --save-dev
  

• 在src目录下创建setupProxy.js文件：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  
  module.exports = function(app) {
      app.use(
          '/websocket',
          createProxyMiddleware({
              target: 'http://localhost:8080',
              changeOrigin: true,
              ws: true, // 显式启用WebSocket代理
              logLevel: 'info' // 可选，用于查看代理日志
          })
      );
  };
  

• 删除package.json中的proxy字段，重启npm start。

3. 确认Spring的CORS配置 #

确保Spring允许localhost:3000的跨域请求，避免连接被拦截：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/websocket/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("GET", "POST")
                .allowCredentials(true);
    }
}

完成以上步骤后，开发环境的SockJS连接即可正常代理到Spring后端，无需每次修改都重新构建。

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