Next.js에서 클라이언트 단에서 CORS를 회피하는 방법은?

[punchdrunkard]

Next.js 에서 백엔드에게 요청을 보낼 때, CORS가 발생하는 경우가 많습니다.
이 때, 클라이언트 단에서 CORS를 회피할 수 있는 방법은 무엇이고, 이는 어떤 기술을 이용한 걸까요?

[Hyevvy]

Next.js에서 클라이언트 단에서 CORS를 회피하는 방법은 Proxy 입니다.
프록시는 클라이언트와 서버 사이에 대리로 통신을 수행하는 중계자를 의미합니다.

[yunjjeongjo]

CORS (Cross-Origin Resource Sharing)

: 추가적인 HTTP Header를 사용하여 애플리케이션이 다른 origin의 리소스에 접근할 수 있도록 하는 메커니즘이다. 다른 origin에서 내 리소스에 함부로 접근하지 못하게 하기 위해 사용된다.

CORS 해결방법 (클라이언트)

Proxy

서버에서 서버로 요청을 보내는 경우에는 CORS 에러가 생기지 않는다. 이를 이용하여, 브라우저에서 Front Server에 요청을 보낸 후 Front Server에서 Back Server로 요청을 보내준다. 응답도 Back Server -> Front Server -> Client로 해주는 것이다.

[sa02045]

1. next.js rewrites 옵션 사용하기
   next 서버가 브라우저의 요청을 가로채 지정한 destination으로 요청을 보냄
   • 프록시 역할보다는 단순 요청을 맵핑하는 듯하다

module.exports = {
    async rewrites() {
        return [
          {
            source: '/api/:path*',
            destination: 'https://api.example.com/:path*',
          },
        ]
      },
  };

2. next.js 서버의 미들웨어에서 Header를 설정하여 cors를 허용하게 한다. next의 응답을 받은 클라이언트는 Access-Control-Allow-Origin 헤더가 설정된다

  app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header(
      "Access-Control-Allow-Headers",
      "Origin, X-Requested-With, Content-Type, Accept, Authorization"
    );