[Next.js] CORS에러 해결하기

1. CORS란

CORS(Cross Origin Resource Sharing)란 한 도메인 또는 Origin의 웹 페이지가 다른 도메인을 가진 리소스에 액세스 할 수 있게 해주는 보안 매커니즘이다.

2. CORS에러가 생기는 이유

간단히 말해 브라우저에서 다른 도메인에 요청을 보낼때 생기는 오류이다.

예를들어 port가 3000인 브라우저가 port가 3080인 백엔드 서버에 요청을 보낸다면 도메인이 다르므로 브라우저가 차단을 해버린다.

 

이를 해결하는 방법은 여러가지가 있지만 이 글에서는 서버와 서버간의 통신에는 CORS에러가 생기지 않는다는 점을 이용해 브라우저와 도메인이 같은 프론트 서버로 도메인을 보낸 뒤 프론트 서버와 백엔드 서버가 통신하는 방법을 사용한다. (Proxy)

 

참고로 요청 받을 주소를 지정해주는 것이 좋다. localhost:3000에서 보내는 요청만 받는다던지

3. Next.js에서 CORS에러를 해결하는 법.

 React에서는 webpack에서 proxy처리를 하거나 http-proxy-middleware같은 라이브러리를 사용했지만, Next.js는 Proxy를 설정해주는 라이브러리인 next-http-proxy-middleware가 내장되어있다.

// next.config.js
const nextConfig = {
  async rewrites() {
    return [
      {
        source: "/api/:path*",
     	destination: "http://example.com/api/:path*",
      },
    ];
  },
};

module.exports = nextConfig;

이걸 추가하면 끝.

 

하지만 나는 여기서 CORS에러가 해결이 안됐는데, 전체를 다시 써보거나 관련 라이브러리를 찾아봐도 도저히 어디서 에러가 나는건지 찾을 수 없었다. 그래서 CORS와 관련된걸 하나씩 지워보기로 했다.

axios.defaults.withCredentials = true;

이 코드를 지웠더니 해결이 되었다.

예전에 공부할 때 CORS에러를 해결하기 위해 추가했었던 기억이 있어서 아무 생각없이 넣어줬었는데, 이 코드 때문에 CORS관련 요청이 두번 보내지는것 같았다. 물론 확실하지는 않지만, Catch부분의 Error메세지가 create 201이 뜨는걸 보면 한 번 CORS에러가 해결이 됐었다는 말이기에..

 

const URL = '/api/post'
await axios.get(URL).then(res => console.log('data: ', res.data))

참고로 fetch할 때 전체 주소를 사용할 필요 없이 api 뒤의 경로만 적어주면 된다.