next.js 와 SOP

Question

react (client) + node.js (backend) 와 같은 구성에서는 SOP 에서 설명해주신 '동일 출처 정책' 으로 인해 'fetch' 등을 사용할때 막히는 경우가 종종 있었는데요. 그래서, 이전에는 fe 팀과 be 팀이 개발을 할때 CORS 작업을 항상 했었던걸로 기억합니다. 최근에 많이 사용하는 next.js 는 bff (backend for frontend) 가 중간에 있어서 SOP 로 인한 문제가 거의 없는것 같은데요. (SOP 는 설명해주신것처럼 브라우저 자체의 보안이기 때문에) 이렇게 이해하는게 맞을까요?

jeonghwan · Answer

네, 이해하신게 정확히 맞습니다. Next.js는 서버에서 정적파일(html/css/js)과 api를 함께 제공하는 구조인데요. 브라우져가 api를 호출할 때, 정정파일의 출처와 같기 때문에 SOP와 관련한 문제를 겪지 않으셨을 거에요.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. writer0713님. Next.js와 같은 서버 사이드 렌더링(SSR) 프레임워크가 BFF(Backend for Frontend) 아키텍처를 채택할 때, SOP(Same-Origin Policy) 문제를 어떻게 해결하는지에 대한 질문을 주셨군요. SOP는 브라우저의 보안 메커니즘 중 하나로서, 서로 다른 출처(origin) 간의 요청을 제한합니다. 이로 인해 클라이언트(프론트엔드)는 서버와의 통신 시 CORS(Cross-Origin Resource Sharing) 설정이 필요하게 됩니다. Next.js는 이러한 SOP 문제를 우회하기 위해 BFF를 활용합니다. BFF는 클라이언트와 백엔드 간의 중간 계층 역할을 합니다. Next.js에서 BFF는 클라이언트의 요청을 처리하고, 자체적으로 백엔드와 통신을 함으로써 SOP 문제를 해결합니다. 즉, BFF는 동일한 출처 내에서 동작하므로 클라이언트 측에서 SOP 문제를 피할 수 있습니다. 다음 글들은 이와 관련된 더 구체적인 예시와 설명을 제공하니 참고하시면 도움이 될 것입니다: &ldquo;빌드시 proxy 질문&rdquo; - 이 게시물에서는 개발 환경에서 프록시 설정을 왜 하고 어떻게 관리하는지 자세히 설명하고 있으며, 프록시 서버의 역할이 SOP 문제 해결에 어떻게 기여하는지를 이해할 수 있습니다. &ldquo;안녕하세요 proxy 설정 관련해서 질문이 있습니다.&rdquo; - 실제 코드 예시와 함께 SOP와 CORS 문제 해결을 위한 프록시 설정에 대해 설명하고 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.