CORS 문제 해결

문제발생

야심차게 백엔드 서버에서 크롤링 기능을 만들고 화면에 렌더링하려고 fetch 함수를 써서 데이터를 받아오려 했다.

그래서 백엔드 서버를 띄우고 localhost:8080 에 fetch 함수로 요청을 보냈다.

하지만 요청을 보내면 200으로 응답은 받는데 자꾸 응답 body가 빈값으로 오는 현상이 발생했다.

 

문제해결

원인은 CORS 때문이었다. CORS의 개념은 이 글을 참고하자.

해결 방법은 아래의 두가지가 생각이 났다.

1. 백엔드 서버에서 origin 관련 설정을 설정해준다.
2. 백엔드 서버 자체에서 HTML 을 렌더링해서 origin 이 애초에 같도록 한다.

스프링으로 HTML, JS 을 사용해본적이 없어서 경험해보고 싶었기 때문에 이 중 두번째 방법을 선택했다.

예상대로 origin이 같으니 응답 body에 데이터가 제대로 넘어왔다.

프론트를 만져보니 팀 프로젝트때는 대충 설정하고 넘겼던 CORS 라는 개념을 직접 사용해야해서

설정에 대해 더 공부하고, 이해하고 알아보는 좋은 기회가 됐다.

하지만 웹서버와 WAS 를 분리하는 시점이 오면 첫 번째도 해봐야 할 시점이 오겠지.

그땐 조금 더 많은 경험을 할 수 있을것 같다.