네이버 API CORS 오류 해결

서론

이번에 진행하는 프로젝트에서는 네이버 뉴스 api를 활용하기로 하였다.
하지만 전에도 한 번 검색 api를 사용했었을 때도 CORS 오류가 나왔다.
당연히 이번에도 CORS 오류가 났기 때문에 트러블 슈팅의 과정을 정리해 보자 한다.

문제1

네이버 api를 그대로 사용하게 된다면 나오게 되는 CORS 오류이다.
분명 headers 설정도 잘 해주었고 요청 URL도 정상인데 왜 오류가 날까...

그래서 서칭을 해보았고, 나와 같은 문제를 겪은 개발자 분들이 이미 네이버 개발 센터에 문의를 올려서 답변을 기다리고 있었다.

하지만 돌아오는 답변은 없었기 때문에 문제가 뭔지 모르겠다

문제1 해결 방법

const nextConfig = {
  reactStrictMode: false,
  
  ...
  async rewrites() {
  	return [
    	{
          source: '/:path*',
          destination: 'https://openapi.naver.com/:path*'
        }
    ]
  }
}

module.exports = nextConfig;

이 코드는 어떤 경로로든 요청을 보내면, 그 요청은 네이버 API로 전달되는 코드이다.

rewrites되는 요청이 네이버 API에 직접 접근하는 것처럼 보이지만, 실제로는 Next.js 서버에서 해당 API로 프록시 요청을 처리하게 된다.

결론은 rewrites를 사용하여 CORS 문제를 피할 수 있다.

하지만 해결된 줄 알았던 CORS 문제는 404페이지를 작업하면서 또다른 문제를 직면할 수 있었다.

문제2

위 코드의 활용법을 제대로 알지 못하고 적용한 오류이다.
어떤 경로로든 요청을 보내면 네이버 API로 URL을 바꿔버리기 때문에 404로 가는 요청도 https://openapi.naver.com/details가 되어버린다.

문제2 해결 방법

const nextConfig = {
  reactStrictMode: false,
  
  ...
  async rewrites() {
  	return [
      {
        source: '/v1/:path*',
        destination: 'https://openapi.naver.com/v1/:path*',
      },
    ]
  }
}

module.exports = nextConfig;

이런 식으로 /v1으로 요청을 보냈을 때만 rewrites 되도록 코드를 수정하면 된다.

나랑 똑같은 문제를 겪고 트러블슈팅을 기록한 블로그이다. 도움 주셔서 감사합니다😊
https://happytape.tistory.com/63