[CORS Error] 인증 요청 시 Access-Control-Allow-Origin 설정 오류

상황

Access to XMLHttpRequest at ‘
http://13.125.250.180/member/signup’from origin ‘http://localhost:3000/’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

프론트 서버 배포전 configuration.addAllowedOrigin("*") 로 모든 Origin에서 오는 요청을 허용하였지만, 프론트에서
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. (요청된 리소스에 'Access-Control-Allow-Origin'헤더가 없다) 오류가 떴다.

 

해결

Credentialed Request (인증된 요청) : 요청에 인증과 관련된 정보(쿠키)를 담을 수 있게 해주는 옵션 (기본적으로 브라우저가 제공하는 비동기 리소스 요청 API인 XMLHttpRequest 객체나 fetch API는 별도의 옵션 없이 브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 요청에 담지 않는다.)

credentials 옵션 값인 same-origin이나 include와 같은 옵션을 사용하여 리소스 요청에 인증 정보를 포함한 상태에서 다른 출처의 리소스를 요청한다.
이때 브라우저는 다른 출처의 리소스를 요청할 때 Access-Control-Allow-Origin만 확인하는 것이 아니라, CORS 정책 위반 여부를 검사하는 룰에 아래 두가지를 추가한다.

1. Access-Control-Allow-Origin 에는 모든 요청을 허용하는 * 을 사용할 수 없으며, 명시적인 URL이어야 한다.
2. 응답 헤더에는 반드시 Access-Control-Allow-Credentials: true가 존재해야 한다.

출처: https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

따라서 오류 원인은 SecurityConfiguration의 CorsConfiguration에서 AllowedOrigin을 추가할 때 명시적인 URL로 추가하지 않았기 때문이었다.
프론트엔드의 localhost를 추가하여 해결했다: configuration.addAllowedOrigin("http://localhost:3000");

프론트엔드가 배포한 후에는 배포 서버 주소 또한 후에 추가 해야 한다.

CORS 정리 내용 참고: https://kk-programming.tistory.com/63

[Web] CORS (Cross Origin Resource Sharing)