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

Issue

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');    
});

Solution

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.

Answered By - JineappleAra