Spring 引导、javascript 和网络套接字出现 CORS 错误

Question

我正在做一个小测试项目，有一个简单的 html 页面（使用 javascript）作为前端，还有一个 Spring 用于我的 api 的启动应用程序作为后端。我使用带有 stomp 和 sockJS 的 websocket 来保持我在前端和后端之间的连接。我的问题如下：当我测试我与 Postman 的连接时没有问题，但是当我从 javascript 调用 api 时出现以下错误：

我尝试了我在互联网上找到的所有解决方案，但现在我被卡住了

这是我的 Spring 启动 App_controller :

@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

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

chrome --disable-web-security --user-data-dir={some dir}

在您的代码中，您执行了两次 registry.addEndpoint()，删除一个并将“*”替换为“http://localhost:63342”。删除所有其他 CORS 相关代码。

Answer 2

我觉得@bean WebMvcConfigurer corsConfigurer 如果是简单的测试就不需要创建了。能否请您做一个测试，删除该 bean 的注册并更改注释的顺序？

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

Spring 引导、javascript 和网络套接字出现 CORS 错误

CORS error with Spring boot, javascript and web socket

javascript

stomp

websocket

sockjs

spring-boot