本教程旨在解决Spring WebSocket服务器与不同端口客户端连接时遇到的跨域问题。当WebSocket客户端与服务器部署在不同端口或域名下时，由于同源策略限制，连接可能失败。文章将详细阐述此问题的根源，并提供通过在Spring WebSocket配置中设置setAllowedOrigins来有效解决连接故障的专业方法。
WebSocket跨域连接概述
websocket
协议旨在提供全双工通信，但其连接建立（握手）过程仍然基于http协议。这意味着在websocket握手阶段，
浏览器
会遵循http的同源策略（same-origin policy）。同源策略是一种安全机制，它限制了从一个源加载的文档或脚本如何与另一个源的资源进行交互。如果客户端（例如，一个web页面）与websocket服务器的协议、域名或端口中的任何一个不同，浏览器就会将其视为跨域请求。
在典型的开发场景中，
前端
应用可能运行在http://localhost:3000，而后端Spring WebSocket服务运行在http://localhost:8080。在这种情况下，尽管它们都在localhost上，但端口不同，因此构成跨域。当客户端尝试连接时，浏览器会拦截并检查服务器的响应头是否包含允许该来源访问的信息，否则会阻止连接。
问题重现：不同端口下的连接失败
考虑以下一个简单的Spring WebSocket服务器配置：
以及处理文本消息的
处理器
：
当客户端（例如一个简单的HTML页面）与服务器部署在同一端口（如http://localhost:8080/index.
html
）时，以下JavaScript代码能够成功建立WebSocket连接：
然而，当这个HTML页面被部署在不同的端口（如http://localhost:3000/index.html）并尝试连接到ws://localhost:8080/sockets时，浏览器控制台会报告以下错误：
这明确指示了由于跨域限制，WebSocket握手未能成功完成。
解决方案：配置允许的来源
解决此问题的关键在于在Spring WebSocket配置中明确告知服务器允许哪些来源的客户端发起连接。这通过WebSocketHandlerRegistry的setAllowedOrigins()方法实现。此方法用于配置跨域资源共享（CORS）策略，以允许来自指定来源的WebSocket握手请求。
将WebSocketConfig类中的registerWebSocketHandlers方法修改如下：
通过添加.setAllowedOrigins("*")，服务器在WebSocket握手响应中会包含相应的CORS头信息，告知浏览器允许任何来源的客户端连接。此时，即使客户端运行在http://localhost:3000，也能成功连接到ws://localhost:8080/sockets。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
安全性考量与最佳实践
尽管setAllowedOrigins("*")能够快速解决跨域连接问题，但在生产环境中，直接允许所有来源（*）存在潜在的安全风险。这意味着任何网站都可以尝试连接到您的WebSocket服务，可能导致未授权访问或滥用。
最佳实践建议：
指定具体来源：
在生产环境中，应明确列出所有允许连接的客户端源。例如，如果您的前端应用部署在http://localhost:3000和https://yourfrontend.com，则应配置为：
您可以传入多个字符串参数来指定多个允许的来源。
动态配置：
对于更复杂的部署或环境，可以从配置文件（如application.properties或application.yml）中读取允许的来源列表，使其更具灵活性。
在application.properties中：
websocket.allowed-origins=http://localhost:3000,https://yourfrontend.com
HTTPS：
始终建议在生产环境中使用WSS（WebSocket Secure）协议，即基于HTTPS的WebSocket连接，以加密通信内容，提高安全性。
总结
当Spring WebSocket服务器与运行在不同端口或域名的客户端进行连接时，由于同源策略的限制，可能会出现连接失败的问题。解决此问题的核心在于在Spring WebSocket的配置中，通过WebSocketHandlerRegistry的setAllowedOrigins()方法明确指定允许发起WebSocket握手的客户端来源。虽然setAllowedOrigins("*")可以方便地解决开发环境中的问题，但在生产环境中，为了保障安全性，强烈建议配置具体的允许来源列表，并考虑使用WSS协议进行加密通信。正确配置跨域策略是确保WebSocket应用在复杂部署环境中稳定运行的关键一环。
// WebSocketConfig.java
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Autowired
SocketTextHandler socketTextHandler;
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(socketTextHandler, "/sockets");
}
}// SocketTextHandler.java
@Component
public class SocketTextHandler extends TextWebSocketHandler {
@Override
public void handleTextMessage(WebSocketSession session, TextMessage message)
throws InterruptedException, IOException {
String payload = message.getPayload();
System.out.println("Received from session " + session.getId() + ": " + payload);
session.sendMessage(new TextMessage("Resp: " + payload));
}
@Override
public void handleTransportError(WebSocketSession session, Throwable exception) {
System.out.println("Server transport error for session " + session.getId() + ": " + exception.getMessage());
}
}
Hello
WebSocket connection to 'ws://localhost:8080/sockets' failed// WebSocketConfig.java
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Autowired
SocketTextHandler socketTextHandler;
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(socketTextHandler, "/sockets")
.setAllowedOrigins("*"); // 关键的修改
}
}registry.addHandler(socketTextHandler, "/sockets")
.setAllowedOrigins("http://localhost:3000", "https://yourfrontend.com");// 示例：从配置文件读取允许的来源
@Value("${websocket.allowed-origins}")
private String[] allowedOrigins;
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(socketTextHandler, "/sockets")
.setAllowedOrigins(allowedOrigins);
}