vue3里面使用Socketjs之后打包完访问的时候报socketStore-BmspPEpN.js:1 WebSocket connection to

问题原因与解决方案

出现 404 Not Found 错误（请求 iframe.html 失败）的根本原因是 SockJS 所需的静态资源文件未正确部署到服务器，或 代理配置未正确处理 SockJS 路径。以下是逐步排查和解决方案：

---

1. 确认 SockJS 的静态资源是否部署

问题原因

SockJS 在建立连接时，会尝试加载 iframe.html、iframe.xhtml 等文件。这些文件需要存在于服务器的静态资源目录中，路径需与 WebSocket 端点一致（例如 /webrtcSocketConnect/）。

解决方案

1. 手动添加 iframe.html 到 Spring Boot 静态目录：
   • 创建目录：src/main/resources/static/webrtcSocketConnect/。
   • 从 SockJS 官方库 下载 iframe.html，并复制到上述目录。
   • 文件结构示例：

   src/main/resources/static/
     └─ webrtcSocketConnect/
         ├─ iframe.html
         └─ other-sockjs-files...
   

2. 验证文件是否被打包：
   • 执行 mvn clean package 后，解压生成的 JAR 文件，检查路径 BOOT-INF/classes/static/webrtcSocketConnect/iframe.html 是否存在。

其实就是得要SpringBoot的框架里面有个代理Socketjs的包里面就有上面的，代理到里面就可以了，我这里的主要的原因是我把打包的包放到了resource下面的静态资源文件夹里面但是还是要代理webrtcSocketConnect到SpringBoot里面就可以了

---

2. 检查 Nginx 代理配置

问题原因

Nginx 未正确代理 /webrtcSocketConnect 路径，或未处理 WebSocket 的协议升级请求。

解决方案

修正 Nginx 配置，确保代理路径和协议升级头正确：

server {
    listen 443 ssl;
    server_name 192.168.199.191;

    ssl_certificate     D:/mkcert/192.168.199.191.pem;
    ssl_certificate_key D:/mkcert/192.168.199.191-key.pem;

    # 代理 SockJS 请求到后端
    location /webrtcSocketConnect {
        proxy_pass http://localhost:8080;  # 后端 Spring Boot 端口
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 解决跨域
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    }

    # 其他路径代理（可选）
    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
    }
}

---

3. 检查 Spring Boot 的 WebSocket 配置

问题原因

后端未启用 SockJS 支持，或未正确配置 WebSocket 端点。

解决方案

确保 Spring Boot 正确配置 WebSocket 并允许跨域：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 注册 WebSocket 端点并启用 SockJS
        registry.addEndpoint("/webrtcSocketConnect")
                .setAllowedOriginPatterns("*")  // 允许所有来源
                .withSockJS();  // 启用 SockJS 支持
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");  // 消息代理前缀
        registry.setApplicationDestinationPrefixes("/app");  // 应用目标前缀
    }
}

---

4. 检查 Spring Security 配置

问题原因

Spring Security 拦截了 WebSocket 相关请求（如 iframe.html 或 WebSocket 握手请求）。

解决方案

在安全配置中放行 WebSocket 路径：

import org.springframework.context.annotation.Bean;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.web.SecurityFilterChain;

@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
            .csrf().disable()  // 关闭 CSRF
            .authorizeRequests()
                .antMatchers("/webrtcSocketConnect/**").permitAll()  // 放行 WebSocket 路径
                .anyRequest().authenticated();
        return http.build();
    }
}

---

5. 验证并测试

步骤

1. 直接访问 iframe.html：
   • 运行 Spring Boot 后，访问 http://localhost:8080/webrtcSocketConnect/iframe.html，确认返回 200 OK。
   • 通过 Nginx 代理访问 https://192.168.199.191/webrtcSocketConnect/iframe.html，同样应返回 200。

2. 检查 WebSocket 连接：
   • 打开浏览器控制台（F12 → Network），观察 WebSocket 握手是否成功。
   • 查看 Nginx 日志（logs/error.log）和 Spring Boot 日志，确认无错误。

---

常见问题总结

错误现象	原因	解决方案
404 Not Found	静态资源未部署	手动添加 iframe.html 到静态目录
WebSocket 握手失败	Nginx 未处理协议升级	添加 Upgrade 和 Connection 头
403 Forbidden	Spring Security 拦截	放行 /webrtcSocketConnect/** 路径
跨域错误（CORS）	后端未允许跨域	配置 setAllowedOriginPatterns("*")

完成以上步骤后，404 Not Found 和 WebSocket 连接失败问题应被解决。如果仍有问题，请提供 Nginx 和 Spring Boot 的日志片段。