Spring Boot、javascript和web套接字的CORS错误

Question

我尝试了我在互联网上找到的每一个解决方案，现在我只是卡住了

这是我的Spring boot App_控制器：

@RestController
@CrossOrigin(origins = "*")
public class App_Controller {

    int id = 0;
    ArrayList<Player> players = new ArrayList<Player>();
    public void addTab(Player p){
       players.add(p);
    }

    @MessageMapping("/batch-socket")
    @SendTo("/topic/messages")
    public String send(String message) throws Exception {
        String time = new SimpleDateFormat("HH:mm").format(new Date());
        return (message + " : " + time);
    }


    @RequestMapping (value = "/error", produces = MediaType.APPLICATION_JSON_VALUE, method = RequestMethod.GET)
    public String error(){
        return "erreur";
    }
}

这里是我的corsConfiguration：

@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry){
                registry.addMapping("/**")
                        .allowCredentials(true)
                        .allowedOrigins("*")
                        .allowedHeaders("*")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .maxAge(3600);

            }
        };
    }
}

以下是我的WebSocketConfiguration：

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.setApplicationDestinationPrefixes("/topic")
                .enableSimpleBroker("/app");
    }

    @Override public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/batch-socket");
        registry.addEndpoint("/batch-socket")
                .setAllowedOrigins("*")
                .withSockJS();
    }
}

最后，这里是我连接此WebSocket的函数：

    function connect(){
        var socket = new SockJS("http://localhost:8080/batch-socket");
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function(frame){
            setConnected(true);
            console.log('Connected: ' + frame);
            stompClient.subscribe('/topic/messages', function(msgOutput){
                console.log(msgOutput);
            })
        })

    }

我试图添加@CrossOrigin（origins=“*”）和@CrossOrigins（origins=”）http://localhost:63342）我用我的CorsConfig测试了多种可能性。

提前谢谢你的帮助（对不起我的英语）

Answer 1

我认为，如果是为了一个简单的测试，您不需要创建@bean WebMVCConfiguer corscoonfiguer。您能做一个删除该bean注册的测试并更改注释的顺序吗？

@CrossOrigin(origins = "http://localhost:63342")
@RestController

Answer 2

您没有说明如何加载带有JS的HTML页面。它是同一个localhost:8080还是本地文件
对于测试，您可以告诉Chrome忽略cors限制：

chrome--disable-web-Security--user-data-dir={某些dir}

在您的代码中，您正在执行注册表。addEndpoint（）两次，删除一个并将“*”替换为“http://localhost:63342“。删除所有其他与CORS相关的代码。