Next.js CORS 에러

Hyunwoo Seo·2022년 7월 29일
0

ErrorCode

목록 보기
15/16
post-thumbnail

CORS는 Cross-Origin Resource Sharing의 줄임말로, 한국어로 직역하면 교차 출처 리소스 공유라고 해석할 수 있다.

출처(Origin)Protocol, Host, Port 를 모두 합친 것을 의미한다.
ex) https://www.github.com:443

출처의 구분은 두 URL 의 구성 요소들 중에서 Scheme, Host, Port 이 3가지만 동일하면 된다.

같은맥락으로, 서버 개발자분이 주소를 허용해줬으나 내가 개발하는 환경은 localhost 라면 당연히 CORS 에러가 나게 되는 것이다.

서버 개발자분이 access-control-allow-origin 을 * 해준다면 상관없으나, 여러가지 이유로 불가능하다.

나는 Next.js 를 사용하고 있으므로, Next.js 에서 이슈를 해결하려면 React 와는 조금 다르다.

React 는 webpack 에서 proxy 처리를 하고, Next.js 는 next.config 에서 proxy 처리를 한다.

코드는 비슷하다.

const nextConfig = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: '/:path*',
        destination: `전달받은 API 주소/:path*`,
      },
    ];
  },
};

module.exports = nextConfig;

이후 axios 로 호출할때는, 앞의 전체 주소를 사용할 필요 없이 API 주소 뒷부분 경로부터 쓰면 된다!

...
// const URL = `http://sample.com:1234/api/post`  <- 이렇게 안써도 됨.
const URL = `/api/post`
await axios.get(URL).then(res => console.log('data: ', res.data))

0개의 댓글