1. 발생

OpenApi를 사용하여 토이프로젝트를 진행하고 있는데, SSR페이지에서는 CORS에러가 발생하지 않고 잘 호출이 되었지만, CSR페이지에서는 CORS에러가 발생하는 현상이 나타났다.

2. CORS 에러란?

교차출처리소스정책으로, 브라우저에서 호스트, 포트, 프로토콜 이 셋중 하나라도 다를 시 브라우저가 다른 출처라고 인식하고 차단하는 정책이다.
CORS는 서버에서 명시적으로 허용된 출처에 대해 리소스 접근을 허용한다. 이를 통해 다른 출처에서 안전하게 데이터를 요청하고 공유할 수 있다.

3. 발생 원인

당연하게 발생하는 것이 맞았는데, SSR페이지에서만 호출을 해서 내가 착각하고 있던 것 같다.

• SSR은 서버에서 API를 호출해서 완성된 html를 보내주기 때문에 브라우저에서 CORS에러에 걸릴 이유가 없었다.

• CSR 페이지에서는 브라우저에서 호출을 하기 때문에 나의 http://localhost3000 과 openAPI의 주소가 다르기 때문에 CORS에러가 발생했던 것이었다.

4. 해결

1. Rewirte

Nextjs에서는 rewirte이라는 기능을 제공하는데 이 방법이 내가 예전에 사용했던 프록시 우회 라이브러리와 비슷한 기능을 가졌다.

이런식으로 next.config에 작성하면 되는데,

• source는 클라이언트에서의 요청경로를 지정한다.
• destination은 해당 요청이 재작성될 목적지 URL을 지정한다.

위에 처럼 설정하게 된다면 이제 http://localhost:3000 이 아닌 https://api.neople.co.kr/ 의 url로 재작성되어 호스트 포트 프로토콜이 모두 맞게 되기 때문에 CORS에러를 우회할 수 있다.

이런식으로 사용할 api의 앞부분 https://api.neople.co.kr/ 를 생략할 수 있다.