Blocked by CORS policy - wildcard '*' and withCredentials is true

Question

I get the following CORS error:

 Access to XMLHttpRequest at 'https://my.domain/api/chat/info?t=1701325904808' from 
 origin 'http://localhost:8100' has been blocked by CORS policy: The value of the 
 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when 
 the request's credentials mode is 'include'. The credentials mode of requests 
 initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
 chatItemMessage.page.ts:40     GET https://my.domain/api/chat/info?t=1701325904808 
 net::ERR_FAILED 200 (OK)

Is there any possibility at client to solve this? I use this two packages because the backend also user SockJS (Spring Boot):

npm install sockjs-client
npm install stompjs

I have this AppHttpInterceptor:

@Injectable()
export class AppHttpInterceptor implements HttpInterceptor {

constructor(protected authService: AuthService, private router: Router) { }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return from(this.authService.getToken()).pipe(
        switchMap((token) => {
            const tokenString: string = token as string;
            if(token) {
                let authReq = req.clone({
                    setHeaders: {  
                        'x-auth-token': tokenString,
                        'Content-Type': 'application/json'
                        }
                });
                return next.handle(authReq);
            } else {
                return next.handle(req);
            } 
        })
    );
  }
}  

but this interceptor is never invoked if GET https://my.domain/api/chat/info?t=1701325904808 is requested. I have read almost any about the exception but I dont know what do to in oder to solve this.

This is my webSocked code:

const socket = new SockJS('https://my.domain/api/chat');
const stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
    alert('connected StompClient in chatItemMessage.page.ts');    
});

Answer 1

No, this needs to be solved on the server side. The server must not use the wildcard, but rather return the specific origin (or list of origins) allowed in 'Access-Control-Allow-Origin'.

What you can do on the backend to allow any origin with credentials (but consider the security implications, a fixed list is always preferable) is to always return the origin of the request in 'Access-Control-Allow-Origin'. That is effectively a wildcard but does not fall under this restriction.