allowCredentials true 설정시 Access-Control-Allow-Origins 에 명시적 도메인 설정하자 (+ 추가 - allowedOriginPatterns)

내가 걷은 이슈 메세지

"When allowCredentials is true, allowedOrigins cannot contain the special value "*" since that cannot be set on the "Access-Control-Allow-Origin" response header. To allow credentials to a set of origin ... "

: allow credentials true 로 설정하면 allowedOrigin를 "*"로 설정할 수 없다고 한다.
어제 새벽엔 그냥 도메인을 바로 설정해주고 해결했는데 정책이 궁금했음

요청의 자격증명 모드 ( Request.credentials ) 가 include이면 Access-Control-Allow-Credentials 값이 true 일 경우에만 브라우저들은 응답을 노출한다.
-> 이렇게 했는데 왜 안될까 -> 는 에러메세지에 나와있다
-> 해당하는 자격증명들은 쿠키, authorization headers or TLS 클라이언트 인증서
-> TLS란 SSL Handshaking 의 업그레이드된 버전이라고 생각하면 될 듯? 아직 잘 모르겠다..

credentialed Request?

출처 : https://evan-moon.github.io/2020/05/21/about-cors/

CORS는 왜 이렇게 우리를 힘들게 하는걸까?

인증된 요청을 사용하는 방법
브라우저의 비동기 리소스 요청 API인 XMLHttpRequest나 fetch API는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않는다
이떄 요청에 인증과 관련된 정보를 담을 수 있게 해주는 옵션이 바로 credentials 옵션

이 옵션에는 세 가지 값이 들어간다.
- same-origin : 같은 출처간 요청에만 인증정보를 담을 수 있다.
- include : 모든 요청에 인증정보를 담을 수 있다.
- omit : 모든 요청에 인증 정보를 담지 않는다.

이 옵션들이 들어가면 브라우저는 리소스를 요청할 때 단순히 Access-Control-Allow-Origin 만 확인하는 것이 아니라 좀 더 빡빡한 검사 조건을 건다. (preflight 요청시 검사)
그리고 이 경우가 나의 에러 메세지의 원인...

-> 자격증명모드가 include일 경우?

1. Access-Control-Allow-Origin에는 "*"사용 불가, 명시적인 URL이어야 함.
2. 응답 헤더에는 반드시 Access-Control-Allow-Credentials가 true 여야 함.


브라우저단의 리퀘스트 예제는 하단과 같고 나같은 경우는 axios의 withCredentials 옵션 사용하였음

+ 추가 

allowedOriginPatterns

댓글로 진환님께서 allowedOriginPatterns에 대해 알려주셔서 알아보니 요즘은 이게 권장되고 있는 기능이라고 한다! 오류메시지에 떴었는데 왜 안 찾아봤지.. 까막눈 ㅠㅠ...

감사합니다 :)

 

-> allowedOrigins에 확장성있게 추가된 기능. -> allowedOrigin은 특정한 도메인만 받을 수 있다. -> cors스펙상 "*"가 허용되지 않음.
-> setAllowedOriginPatterns를 대신 사용하는 것이 권장되고 있다.
-> 와일드카드를 이용해서 좀 더 확장성 있는 도메인 패턴을 적용할 수 있도록 도와준다.

 

-> 이슈 설명 링크
https://github.com/spring-projects/spring-framework/issues/26111#issuecomment-729805112

-> 좀 더 자세한 설명
https://github.com/spring-projects/spring-framework/commit/0e4e25d227dedd1a3ecddc4e40c263f190ca1c2b
위에서 부터 쭉 읽어보기. 166번째 줄의 setAllowedOriginPatterns / 하나일 경우엔 addAllowedOriginPattern("*")