스프링부트 - 리액트 프로젝트 CORS 문제 해결

Question

학원에서 진행한 스프링부트,리액트 프로젝트를 완성했습니다.각각 가비아에서 도메인을 구매한 후에 스프링부트 프로젝트는 aws ec2로 배포 한 후에 route53 을 사용하여 도메인 연결했구요.리액트는 깃허브 페이지를 이용하여 배포한 후에 커스텀 도메인을 등록했습니다.https://wanderlogg.store/ (프론트엔드 배포 사이트)여기서 이제 문제가 발생했습니다.localhost로 작업할 때는 서로 문제없이 통신이 잘 되었는데 배포 후에는 이게 서버로 보내는 요청을 받지 않더군요.시큐리티 설정에서도 //CORS 설정@Beanpublic CorsConfigurationSource corsConfigurationSource() {CorsConfiguration configuration = new CorsConfiguration();configuration.addAllowedOrigin("https://wanderlogg.store");configuration.addAllowedMethod("*"); //모든 HTTP 메서드 허용 / 추후 수정configuration.addAllowedHeader("*"); //모든 헤더 허용 /추후 수정configuration.setMaxAge(3600L); //preflight 요청 캐시 시간을 설정 (1시간)configuration.setAllowCredentials(true); //자격 증명 허용UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", configuration);return source;}이런식으로 프론트엔드의 url을 등록해두었구요.하지만 여전히 브라우저 콘솔에서는 cors 에러를 내뱉고 있습니다..어느정도 감이 잡히면 gpt한테 물어봐서라도 해결할텐데 이건 도저히 어디서부터 해결해나가야 할 지 감이 잡히지 않습니다.아시는 분은 알려주시면 감사하겠습니다.

신입공돌이 · Answer

.yaml? yml 파일을 개발용으로 작성하거나 한건 아니시죠?~?배포용으로도 따로 작성을 해둔건가요?

샘톨 · Answer

문의하실 땐, 작동 순서, 예상 결과, 실제 결과, 작성 코드 이렇게 구분해서 적어주시면 좋습니다.ex)작동순서크롬 브라우저 환경. localhost:9283 으로 호스팅한 index.html 페이지에서 출력 버튼 클릭예상결과alert 창 뜨고 내용에 "안녕하세요" 표시실제결과아무 일도 일어나지 않음작성코드// 1.1 크롬 브라우저 환경. localhost:9283 으로 호스팅한 index.html 페이지에서 출력 버튼 클릭 구현 // index.html ... // 버튼 설정 ... ...

휘뚜루마뚜루루 · Answer

현재 처리는 WebMvcConfigurer를 실 구현체로 구현한것도 아니고빈 등록만 되어있어서 호출하는 코드가 아예 없다는걸 인지하셔야 할 듯합니다.결국 필터로 작업하셔서 DispatcherServlet이전에 호출하셔야 지금 등록한 빈이 의미있어지겠네요.아니면 시큐리티 사용중이시라면 SecurityFilterChain 필터에서 .cors().configurationSource(corsConfigurationSource()) 이렇게 연결 하시면 됩니다.

jey10102 · Answer

혹시 프론트 쪽에도 CORS 설정 만지신게 있을까요? 있다면 한번 무시하거나 지우고 다시한번 해보세요!제 경험상 프론트와 백 둘다 CORS 중복 설정될 경우 CORS 에러가 발생하는 경우가 있더라구요.

취업하고싶습니다23 · Answer

스프링 필터에 cors필터 추가하셨나요?

톰소여 · Answer

리액트 플젝 쪽에서 오류가 뜨는 건가용? 만약 그렇다면.. 그리고..Access to XMLHttpRequest at 'https://www.wanderlog.shop/api/getSearch' from origin 'https://wanderlogg.store' 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.Understand this errorwww.wanderlog.shop/api/getSearch:1 이렇게 뜨는 거 같은데.. 차라리.. react에 vite를 추가해서 proxy 설정을 해보세요. 관련 내용 찾아서 올려봅니다.https://velog.io/@youa7878/Proxy-Vite-Proxy-%EC%84%A4%EC%A0%95

꽃춘 · Answer

제가 여기 질문해보는게 처음이라 형식이 좀 그렇네요..ㅎㅎ;;여기 cors 빈은 filterchain에 물론 등록해두었구요.크롬브라우저에서 배포한 프론트 페이지로 들어가면 콘솔창에 이런 화면이 나오게 됩니다.리액트 쪽에서는 axios를 사용해 비동기적으로 rest api 로 요청을 보냅니다.저희 프로젝트에서는 요청 헤더를 전부 다 application/json 으로 지정해두었습니다.프론트쪽에서는 딱히 cors 설정은 해놓은게 없습니다.https://github.com/WanderLog-kor/WanderLog_BN/blob/main/src/main/java/com/tripPlanner/project/commons/SecurityConfig.java저희 팀 프로젝트 백엔드 코드 github입니다.답변 감사합니다.

nathak · Answer

addAllowedOrigin위메서드 대신 아래 메서드 사용보세요addAllowedOriginPattern

꽃춘 · Answer

이래저래 해보니 리눅스에서 직접 프로젝트를 실행하니 잘 되었습니다.보니까 젠킨스에서 자동 배포 스크립트에서 생긴 오류였습니다.젠킨스에서 sudo 권한이 제대로 주어지지 않아 프로젝트가 실행이 되지 않아 요청을 받지 않는 것이었습니다. 답변 주신 분들 감사합니다 !!

스프링부트 - 리액트 프로젝트 CORS 문제 해결

9개의 답변

#cors 목록