React前端无法连接Azure上的Spring Boot后端WebSocket，遭遇CORS错误

看起来你已经搭好了基础的认证流程，但WebSocket的CORS问题确实容易踩坑，我帮你梳理几个最可能的问题点和解决办法：

1. 优先修正Allowed Origins的拼写错误 #

你的后端配置里有个明显的笔误："https:letschyatt.netlify.app"少了双斜杠，应该是"https://letschyatt.netlify.app"。浏览器对Origin的匹配是严格的，少了这个斜杠会导致Netlify的域名完全不被允许，这大概率是当前的核心问题！

修正后的后端WebSocket配置：

@Configuration
@EnableWebSocketMessageBroker
public class Registrations implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws")
                // 修正Origin的拼写，加上双斜杠
                .setAllowedOrigins("http://localhost:3000", "https://letschyatt.netlify.app")
                .withSockJS();
    }
}

2. 检查Azure App Service的全局CORS配置 #

Azure App Service本身有一层全局CORS设置，会优先于Spring应用内部的CORS配置生效。你需要：

• 登录Azure门户，找到你的chyatt.azurewebsites.net应用服务
• 进入左侧菜单的「CORS」选项
• 在「允许的来源」中添加https://letschyatt.netlify.app和http://localhost:3000
• 确保「允许所有来源」没有被勾选（如果勾选的话，要和你的需求匹配，但精确指定来源更安全）

这一步很容易被忽略，因为云服务的网关层会先拦截请求，再转发到你的Spring应用。

3. 尝试用setAllowedOriginPatterns替代setAllowedOrigins #

有些情况下，精确匹配Origin的setAllowedOrigins在云环境中会有兼容性问题，换成支持模式匹配的setAllowedOriginPatterns可能更可靠：

registry.addEndpoint("/ws")
        .setAllowedOriginPatterns("https://letschyatt.netlify.app", "http://localhost:3000")
        .withSockJS();

这个方法支持通配符（比如https://*.netlify.app），也能更好地处理一些边缘场景。

4. 排查浏览器的具体错误信息 #

打开浏览器开发者工具的「网络」标签，找到WebSocket握手的预检请求（一般是GET /ws/info的请求）：

• 查看请求头里的Origin是否是https://letschyatt.netlify.app
• 查看响应头里的Access-Control-Allow-Origin是否包含这个Origin
• 如果有错误提示，会明确告诉你哪个Origin被拒绝，这能快速定位问题

5. 前端代码的小优化（非CORS直接原因，但能减少错误） #

建议用环境变量管理后端地址，避免部署时写错：

// 比如在Netlify的环境变量里配置REACT_APP_WS_URL=https://chyatt.azurewebsites.net/ws
const socketFactory = () => {
  return new SockJS(process.env.REACT_APP_WS_URL);
};

先从修正Origin拼写和检查Azure全局CORS开始，这两个是最常见的解决点，应该能解决你的问题！

备注：内容来源于stack exchange，提问作者Nishan Kumar Shrestha