springboot react 프로젝트 따로 둔체 연동이 가능한가요 ??

Question

안녕하세요 이번에 프로젝트를 진행하는데 협업입니다react - 프론트spring boot - 백엔드기존에 springboot 프로젝트 안에 react로 연동하여서 cors 설정바꾸고 proxy 설정을 8080으로 react에서 잡도록 하여 연동은 해본적이 있습니다단 , 이 방법의 경우 깃에 커밋 푸쉬를 할 때 동일 프로젝트여서 프론트와 같은 레포를 써야하여이번에 가능하다면 프로젝트를 나눠서 진행해보려합니다문제는 프로젝트를 나눈 다는게 결국react 폴더 따로 springboot 따로 만들어서 프로젝트를 각각의 깃 레포에 올리는 형식일 텐데아무리 해도 react 3000 서버에서 spring 8080 포트를 호출 하여도 데이터를 가져오지 못합니다react 에서 axios 를 사용하여 데이터를 호출하였고 8080에서는 데이터가 제대로 출력되나프론트 쪽에서 데이터를 못가져옵니다혹시 참고할 만한 자료나 어떤 설정 하면 되는지 알려주실 수 있으실까요

Clickin · Answer

리포지토리를 나누는 거랑 프론트 서버 백엔드 서버 따로 나누는 건 전혀 별개입니다.기업에서도 정책에 따라서 전혀 다른 프로젝트들이 한 곳에 들어간 모노레포를 사용하는 경우도 있습니다.단순히 데이터를 못가져올 뿐이면 cors 문제일 가능성이 제일 높아보이나 이건 콘솔에 대문짝만하게 떠서 원인을 모르기가 힘드실텐데...혹시모르니 cors쪽 자료를 확인해보세요

Devvy · Answer

프로젝트를 분리하는것과 CORS 설정과는 연관이 없어보입니다."react 에서 axios 를 사용하여 데이터를 호출하였고 8080에서는 데이터가 제대로 출력되나 프론트 쪽에서 데이터를 못가져옵니다"위 문장을 보아하니 react의 axios로 backend(spring boot)의 API는 정상적으로 호출되지만 backend의 CORS 설정이 정상적으로 설정되지 않아 발생하는 문제로 보입니다.기본으로 돌아가 생각해보겠습니다. CORS는 cross "ORIGIN" resource sharing의 약자이고 서로 다른 ORIGIN에서 요청을 가능케하는 기능 중 하나입니다. 여기서 ORIGIN은 scheme + host + port의 조합(RFC 6454)입니다. 자, 그럼 react와 spring boot의 기본 설정을 사용한다 가정했을 때, ORIGIN은 아래와 같습니다.react: "http://localhost:3000"spring boot: "http://localhost:8080"서로 ORIGIN이 다르기 때문에 CORS 설정을 하지 않으면 react의 axios를 활용해 spring boot의 API를 호출하여 브라우저에 표시할 수 없습니다. 단, 여기서 주의할점은 axios에서 spring boot의 API를 호출하면 실제 로직은 동작한다는 점입니다. 즉 spring boot의 API가 호출되면서 내부의 로직은 모두 실행되고 spring boot에서는 응답을 내려줍니다. 하지만 browser위에서 동작하는 react에서는 CORS 설정이 정상적으로 돼있지 않아 데이터를 보여주지 않습니다.여기서 의문이 들 수 있는데요, 왜 CORS설정을 제대로 하지 않더라도 backend API는 호출되지만 그 응답을 브라우저에서 보여주지 않을까요? 이는 cross origin request를 보내는 클라이언트를 보호하기 위한 목적이 있습니다. 다음과 같은 상황을 가정하겠습니다.CORS 설정 없이도 허용되지 않은 origin에서 요청을 보낼 수 있음(Same Origin Policy가 아예 없다고 가정)우리가 서비스하는 프론트와 백엔드를 각각 "http://frontend.com", "http://backend.com" 이라고 가정해커가 운영하는 프론트 "http://hacker.com"현재 SOP(same origin policy)가 없기 때문에 "http://frontend.com"과 "http://hacker.com"에서 모두 "http://backend.com"의 API를 호출하고 그 응답을 브라우저에서 보여줄 수 있습니다. 우리의 "http://backend.com"에는 게시물을 작성하고 조회하는 기능이 존재한다고 가정합시다. 해커는 API 요청을 보내 악성 스크립트를 포함한 게시물()을 작성했다고 가정하겠습니다. "http://frontend.com"에서 게시물을 조회할 때 등의 코드가 실행될 수 없도록 보호장치가 있다고 가정하겠습니다. 해커는 유저의 정보 등을 탈취하기 위해 게시물에 포함된 악성스크립트를 실행하고 싶어합니다. 이를 위해 해커는 유저를 "http://hacker.com"상의 해당 게시물을 조회하는 페이지에 방문하도록 유인합니다. 유저의 브라우저는 "http://hacker.com"에서 게시물 조회를 위해 "http://backend.com"의 API를 호출하고 "http://hacker.com"에 게시물을 렌더링합니다. 이 때 렌더링된 게시물에 악성 스크립트()가 존재하고, "http://hacker.com"에는 해당 스크립트를 실행할 수 있도록 만듬으로써 유저의 정보를 탈취하는 작업 등이 가능해집니다.간단히 왜 CORS가 필요한지 알아봤으니 어떻게 CORS를 설정해야하는지 살펴보겠습니다. Axios를 활용해 백엔드에 GET 요청을 보냈을 때 요청의 예시를 살펴보겠습니다.GET /resources/public-data/ HTTP/1.1 Host: backend.com User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Connection: keep-alive Origin: http://frontend.com여기서 중요한 점은 Origin 헤더입니다. http://frontend.com이라는 origin에서 요청을 보낸다는 의미입니다.다음은 위 요청에 대한 서버의 응답 예시입니다.HTTP/1.1 200 OK Date: Mon, 01 Dec 2008 00:23:53 GMT Server: Apache/2 Access-Control-Allow-Origin: * Keep-Alive: timeout=2, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: application/json위 응답헤더에서 중요한 헤더는 "Access-Control-Allow-Origin: *"입니다. 모든 origin에 대해 접근을 허용한다는 점입니다. 이는 요청 헤더의 "http://frontend.com"도 포함되겠죠? 이렇듯 요청과 응답 헤더를 분석함으로써 CORS 설정이 정상적으로 됐는지 파악할 수 있습니다.만약 크롬 브라우저를 사용하면 개발자 도구의 네트워크 탭을 활용해서 요청과 응답의 헤더를 확인할 수 있습니다. 아니면 직접 서버의 API에 curl 요청을 보내 헤더를 확인해도 됩니다.스프링부트의 경우 WebMvcConfigurer를 활용해서 CORS의 허용 ORIGIN을 설정할 수 있습니다. 이제 ORIGIN의 개념을 파악하셨을테니 충분히 문제를 해결하실 수 있으리라 믿습니다.추가)CORS와 관련된 헤더가 더 있는데 이를 찾아보시는 것을 추천드립니다.CORS 설정이 올바르지 않더라도 백엔드의 API는 호출된다고 말씀드렸는데요, 이와 관련해서 왜 preflight 요청을 존재하는지도 생각해보면 좋을 것 같습니다.XSS(cross-site scripting)에 대해 생각해보면 좋을 것 같습니다.

라떼개발자 · Answer

네 당근 레포 분리가능해요cors쪽 살펴보세요

springboot react 프로젝트 따로 둔체 연동이 가능한가요 ??

3개의 답변

Q&A 목록