Spring + NextJS 개발환경 연동할 때 생기는 이슈!

현재 저는 백단과 프론트단을 분리 하는 작업을 진행하고 있습니다.

BackEnd 개발환경 - Spiring     /      FrontEnd 개발환경 - NextJS 

로 연동 진행 중에 첫 번째로 부딪히는 이슈!

Same-Origin Policy 동일 출처 정책과 CORS 에러

---

동일 출처 정책(same-origin policy) 때문에 CORS같은 상황이 발생 하면 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단합니다.

그로 인해 정상적으로 데이터를 받을 수 없습니다.

동일 출처 정책(same-origin policy)
어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는
중요한 보안 방식입니다.
동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄여줍니다.

동일 출처 정책 - 웹 보안 | MDN

 

예를 들어, 클라이언트를 3000포트, 서버를 8000포트에서 실행한 후에 클라이언트에서 서버로 AJAX요청을 보내면 위와 같은

CORS에러 화면을 console창에서 확인 할 수 있습니다.

 

같은 도메인으로 요청을 보낸 것이 아니기 때문에 동일 출처 정책에 의해 어김없이 위와 같은 에러를 마주하게 됩니다.

외부 API를 사용하거나 클라이언트와 서버를 분리하여 개발하는 경우에 수시로 접할 수 있습니다.

---

CORS / 크로스 도메인

CORS는 Cross Origin REsource Sharing의 약자, Origin은 url 주소상에서 프로토콜, Domain이름, 포트까지 포함한 개념.

예로 로컬에 nextjs 프론트엔드 서버를 3000번으로 띄웠다면 http://localhost:3000 이 Origin에 해당한다. Same Origin이란 같은 Origin을 뜻하고 Cross Origin 이란 서로 다른 Origin을 뜻하는 말이다. 여기에 붙은 Resrouce Sharing 의 단어까지 포함하면 CORS는 서로 다른 Origin간의 리소스 교환을 뜻한다.

 

즉,  동일 출처 정책(same-origin policy)의 에러를 해결하기 위한 정책인 만큼 CORS란,

출처가 다른 도메인에서의 AJAX(서버와 통신하는) 요청이라도 서버 단에서 데이터 접근 권한을 허용하는 정책입니다.

 

해결방법

1. 서버쪽 해결 (response)
HTTP 응답헤더 Access-Control-Allow-Origin : * 혹은 Access-Control-Allow-Origin: 허용하고자 하는 도메인 설정해주기.
일반적으로 Default로 설정되어 있음.

2. 클라이언트쪽 해결 (request) 
내가 서버헤더 설정할 수 있는 상황이 아니라면!!
리소스 요청하는 서버 사이에 프록시 서버를 하나 거쳐서 요청,응답을 주고 받기.

프록시 서버 : 브라우저와 서버를 통신하는 과정 중간에서 정보교환을 도와주는 중간 서버 ( 브라우저 - 프록시 서버 - 서버 )
프록시 서버는 헤더를 추가하거나 요청을 허용/거부하는 역할을 중간에서 해줘서 Access-Control-Allow-Origin : *의 헤더를 담아 응답해준다!

----> NEXTJS 같은 경우는

next.config.js 라는 파일을 이용해 상대 주소에 대해서는 미리 요청하는 주소를 바꿔줄 수 있다. 이외에도 nginx를 이용해서 프록시를 대신 구현할 수 있다. 아래 코드는 모든 상대 요청에 대해서 localhost:8080 으로 보내는 nextjs 코드다. 브라우저에서 보내는 요청이 아니기 때문에 CORS에 걸리지 않게 된다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  async rewrites() {
    return [
      {
        source: '/:path*',
        destination: 'http://localhost:8080/:path*' // 해당 서버 포트 
      }
    ]
  }
}

module.exports = nextConfig

프록시(Proxy)란?

 

지긋지긋한 CORS error. 이제 제대로 공부해보자.