[Other] react, springboot cors 에러 해결

 

 

백엔드인 springboot의 cors 설정은 위와 같다.

 

 

 

프론트 엔드인 React에서 fetch로 http 요청을 보낼때 

mode를 cors 로 설정해 놓았다.

 

 

 

프론트 엔드에서 요청을 보내면

 

 

 

 try catch에서 에러를 잡아서 보여준다.

 

 

 

네트워크 탭을 확인해 보면은 요청이

백엔드로 가지도 않은거 같다.

---> status 코드가 없다

 

 

 

 

요청 헤더 상황

---> 응답헤더가 없는 것을 보니 요청이 백엔드로 가지 않은거 같다.

 

 

 

프론트에 packge.json파일에 proxy를 추가해준다.

---> 서버의 주소와 포트번호를 작성해준다.

 

 

 

 

백엔드에 요청을 보내는 코드의 url에서 프록시로

설정한 주소를 제외 시킨다.

 

 

 

다시 요청을 보내보면은

 

 

 

 

백엔드 서버에서 요청을 정상적으로 받았다.

 

 

 

보낸 요청에 대한 서버의 응답 헤더에 cors 관련 해더가

정상적으로 실려 있다.

 

 

 

ps.

 

 

proxy 설정을 하고나서 에러 발생

 

 

 

결론

cors 설정을 적절하게 해주어야

프론트와 서버가 정상적으로 통신을 할수가 있다.

 

후기

지금 해놓은 설정은 임시 방편에 불과하다.

더욱더 유연성 있고, 단단한 코드를 작성해야 한다.