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