GET request fails in the browser but succeeds in postman

Question

I am trying to connect to my spring boot websocket endpoint without having to enter my credentials in a popup. For this I want to set the user credentials in the url.

The code looks like this (I am using an existing user with username test and password test):

const url = "http://test:test@localhost:8080/websocket";
var socket = new SockJS(url);
stompClient = over(socket);
await stompClient.connect({}, function (frame) {});

Here is a screenshot from the request that is generated:

Also the Response and Request Headers if these are of any help:

Response Headers
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:3000
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Connection: keep-alive
Content-Type: application/json
Date: Mon, 02 May 2022 22:04:58 GMT
Expires: 0
Keep-Alive: timeout=60
Pragma: no-cache
Set-Cookie: JSESSIONID=F6BBBCECB6BF436489D1BABA1E80D735; Path=/; HttpOnly
Transfer-Encoding: chunked
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
WWW-Authenticate: Basic realm="Realm"
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block

Request Headers:
Accept: /
Accept-Encoding: gzip, deflate, br
Accept-Language: de
Connection: keep-alive
Host: localhost:8080
Origin: http://localhost:3000
Referer: http://localhost:3000/
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="101", "Microsoft Edge";v="101"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.41 Safari/537.36 Edg/101.0.1210.32

In the Spring Boot backend (logging.level.org.springframework.security=DEBUG) following logs are being generated:

2022-05-02 23:53:39.403 DEBUG 23891 --- [nio-8080-exec-3] o.s.security.web.FilterChainProxy        : Securing GET /websocket/info?t=1651528419359
2022-05-02 23:53:39.403 DEBUG 23891 --- [nio-8080-exec-3] s.s.w.c.SecurityContextPersistenceFilter : Set SecurityContextHolder to empty SecurityContext
2022-05-02 23:53:39.404 DEBUG 23891 --- [nio-8080-exec-3] o.s.s.w.a.AnonymousAuthenticationFilter  : Set SecurityContextHolder to anonymous SecurityContext
2022-05-02 23:53:39.404 DEBUG 23891 --- [nio-8080-exec-3] o.s.s.w.a.i.FilterSecurityInterceptor    : Failed to authorize filter invocation [GET /websocket/info?t=1651528419359] with attributes [authenticated]
2022-05-02 23:53:39.404 DEBUG 23891 --- [nio-8080-exec-3] o.s.s.w.s.HttpSessionRequestCache        : Saved request http://localhost:8080/websocket/info?t=1651528419359 to session
2022-05-02 23:53:39.404 DEBUG 23891 --- [nio-8080-exec-3] s.w.a.DelegatingAuthenticationEntryPoint : Trying to match using RequestHeaderRequestMatcher [expectedHeaderName=X-Requested-With, expectedHeaderValue=XMLHttpRequest]
2022-05-02 23:53:39.404 DEBUG 23891 --- [nio-8080-exec-3] s.w.a.DelegatingAuthenticationEntryPoint : No match found. Using default entry point org.springframework.security.web.authentication.www.BasicAuthenticationEntryPoint@5cbc5376    
2022-05-02 23:53:39.404 DEBUG 23891 --- [nio-8080-exec-3] w.c.HttpSessionSecurityContextRepository : Did not store empty SecurityContext
2022-05-02 23:53:39.404 DEBUG 23891 --- [nio-8080-exec-3] s.s.w.c.SecurityContextPersistenceFilter : Cleared SecurityContextHolder to complete request
2022-05-02 23:53:39.404 DEBUG 23891 --- [nio-8080-exec-3] o.s.security.web.FilterChainProxy        : Securing GET /error?t=1651528419359
2022-05-02 23:53:39.404 DEBUG 23891 --- [nio-8080-exec-3] s.s.w.c.SecurityContextPersistenceFilter : Set SecurityContextHolder to empty SecurityContext
2022-05-02 23:53:39.404 DEBUG 23891 --- [nio-8080-exec-3] o.s.s.w.a.AnonymousAuthenticationFilter  : Set SecurityContextHolder to anonymous SecurityContext
2022-05-02 23:53:39.404 DEBUG 23891 --- [nio-8080-exec-3] o.s.security.web.FilterChainProxy        : Secured GET /error?t=1651528419359
2022-05-02 23:53:39.405 DEBUG 23891 --- [nio-8080-exec-3] w.c.HttpSessionSecurityContextRepository : Did not store anonymous SecurityContext
2022-05-02 23:53:39.405 DEBUG 23891 --- [nio-8080-exec-3] s.s.w.c.SecurityContextPersistenceFilter : Cleared SecurityContextHolder to complete request

I am really confused now, because if I copy the request URL into Postman, the request succeeds:

And the following is logged in the server console:

2022-05-03 00:24:53.156 DEBUG 23891 --- [nio-8080-exec-6] o.s.security.web.FilterChainProxy        : Securing GET /websocket/info?t=1651528419359
2022-05-03 00:24:53.156 DEBUG 23891 --- [nio-8080-exec-6] w.c.HttpSessionSecurityContextRepository : Retrieved SecurityContextImpl [Authentication=UsernamePasswordAuthenticationToken [Principal=ch.uzh.ifi.hase.soprafs22.entity.AuthenticatedUser@4920e722, Credentials=[PROTECTED], Authenticated=true, Details=WebAuthenticationDetails [RemoteIpAddress=0:0:0:0:0:0:0:1, SessionId=null], Granted Authorities=[ROLE_USER]]]
2022-05-03 00:24:53.156 DEBUG 23891 --- [nio-8080-exec-6] s.s.w.c.SecurityContextPersistenceFilter : Set SecurityContextHolder to SecurityContextImpl [Authentication=UsernamePasswordAuthenticationToken [Principal=ch.uzh.ifi.hase.soprafs22.entity.AuthenticatedUser@4920e722, Credentials=[PROTECTED], Authenticated=true, Details=WebAuthenticationDetails [RemoteIpAddress=0:0:0:0:0:0:0:1, SessionId=null], Granted Authorities=[ROLE_USER]]]
2022-05-03 00:24:53.156 DEBUG 23891 --- [nio-8080-exec-6] o.s.s.w.a.i.FilterSecurityInterceptor    : Authorized filter invocation [GET /websocket/info?t=1651528419359] with attributes [authenticated]
2022-05-03 00:24:53.156 DEBUG 23891 --- [nio-8080-exec-6] o.s.security.web.FilterChainProxy        : Secured GET /websocket/info?t=1651528419359
2022-05-03 00:24:53.157 DEBUG 23891 --- [nio-8080-exec-6] s.s.w.c.SecurityContextPersistenceFilter : Cleared SecurityContextHolder to complete request

Does the request made with stompjs have some headers that make the request fail? Or could my WebSecurityConfig be the problem?