개발 1도 모르는 사람

[Java] React 와 Spring 연결 시 cors Error 가 났는데..? 알고 보니..? 본문

Java/Java Error Clear

[Java] React 와 Spring 연결 시 cors Error 가 났는데..? 알고 보니..?

지구젤리귀여워 2024. 1. 22. 02:23
728x90



아.. 파이널 프로젝트 도중 조원의 문제없이 잘돌아가는 코드를 확인후에 

집에와서 가져온후 내 코드와 접합시킨뒤에 다를수 있는 부분인 properties 부분과
controller 부분을 수정하고 확인한 후에 실행 했는데
이상하게 내 컴퓨터 에서만 에러가 뜬다.. 그래서 그 에러부분을 보아하니 cors 에러라고 뜨면서
axios 부분을 가르키고 있었는데 

정말 어이없게도 이틀동안 이 cors에러를 보고있엇는데 
문제는 다른곳에 있었따..

상황은 이렇다.
분명 React 에서 Input 밸류값으로

입력한 값을

setSearchTerm 에 저장해서

 


PensionList ( 검색결과 페이지 ) 로 값을 넘깁니다??


짜잔~ 에러가떳어요~ 진짜 단 한번을 얌전히 못넘어가네 
어찌 됐든 가르키고 있는 부분이 Axios부분 과 Spring Controller 에서 cors에러가 뜬것을 볼수있습니다.


 이 부분에서 에러가 뜬건데 보면 axios.get( `http://localhost:8081/penpick/searchAll` ) 부분
Spring에서 term : searchTerm 파라미터를 넘겨 받았습니다


자 문제없이 실행된 Spring boot 에서 값을 넘겨 받았다면 Jpa를 쓰고 있는 저는 당연히 DB에 있는 

Pensions 데이터를 다 출력해야 할텐데..?  ( 근데 여기서 뭔가 이상하긴 했다. 원래 정상적으로 실행되면 MAPPING 쪽에 빛이 들어와 있는데.. 여기엔 안 들어와 있다...)
그리고 CORS 오류라면.. @CrossOrigin 어노테이션으로 분명 허용을 해줬을텐데..?
내가 localhost:3000 이 아닌가..? 엔드 포인트가 틀린가..?


??.. 아닌데..? 왜 안되는지 이해를 못하길 2시간.. 4시간.. 내가 잘 모르는건가 싶어 계속 쳐다보아도..
답이 나오지 않아 결국 도움을 요청했다.. 

첫번째 이유는 Config 를 넣으라는 것..

WebMvcConfig.java
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("OPTIONS", "GET", "POST", "PUT", "DELETE")
                .allowCredentials(true)
                .maxAge(3600);
    }


위 처럼 Config 클래스를 따로 만들어 적용 시키는것. 
Cross Origin 으로 허용을 시켰는데도 불구하고 제대로 적용이 안되니 Config로 적용을 시켜 보는 것


하지만 위 코드를 넣었음에도 불구하고 되질 않았다..

골머리를 앓던중..  지인에게도 이상황을 전달하니.. 프록시 얘기도 나오고.. properties 얘기도 나오고..
하나하나 검색하고 찾아보아도 Config 부분을 제외하면 다를게 없어 보이는데..

그러다가 혼자 열심히 이것저것 해보는 코천 동생이 
" 혹시  @SpringBootApplication  이 아래에 있는거 아닌지 확인해보세요. "
라고 말하는 도중에 느낌이 왔다. 아 XX 이거다. 아 이건거 같다.

아니나 다를까 


불빛도 정상으로 들어오고~


오류도 안뜬채로 너무나도 잘나온다..
항상.. 처음부터 다시.. 기본부터 다시.. 겸손하자..


......화이팅..