프론트엔드 요청에서 'withCredentials'를 사용할 때, 서버에서 origin을 '*' (와일드카드)로 모든 origin을 허용하게 되면 에러가 난다.
프론트엔드 코드
버튼을 누르면 다음과 같은 post 요청이 가도록 하였다.
NestJS 서버에서는 enableCors에서 origin을 '*'로 한 상태이다.
오류 내용
Access to XMLHttpRequest at 'http://localhost:3000/auth/sign-in' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.
프론트엔드 헤더에서 'withCredentials'를 'true'로 설정한 상태에서 허용하는 origin이 모든 출처(*)인 서버로 요청을 보내면 에러가 난다. 모든 출처(*)의 요청을 허용하면 잠재적으로 악의적인 웹사이트를 포함하여 모든 웹사이트가 서버에 요청할 수 있음을 의미한다.
프론트엔드 코드를 수정하는 경우
withCredentials: true 옵션을 없앴다.
요청에 대한 응답으로 토큰이 리턴되고, 쿠키가 잘 들어온다.
서버 코드를 수정하는 경우
origin에 프론트엔드 주소를 넣어주었다.
역시 요청에 대한 응답으로 토큰이 잘 리턴되고, 쿠키가 잘 들어온다.
결론
요약하면 다음과 같다.
프론트엔드 헤더에서 'withCredentials'를 'true'로 설정한 상태에서
허용하는 origin이 모든 출처(*)인 서버로 요청을 보내면 잠재적인 보안 위험으로 에러가 난다.
따라서 프론트엔드 요청에서 withCredentials: true 옵션을 해제하든가,
아니면 서버의 허용 origin을 모든 것이 아닌 프론트엔드의 주소로 바꿔줘야 한다.
