[next.js] cors 에러 및 response가 비어있어요!

분명히 sign-in에 요청을 보냈는데 요청이 실패하고 실패 요청 하나가 새로 생기면서 저렇게 응답이 왔다. 내가 기대한 요청과 응답은 요청에 해당하는 응답이 그 요청에 오는 거였는데 해당 요청에서는 failed to load response data: No content available because this request was redirected. 이 메시지가 떴고 확인해보니 해당 요청은 302코드로 실패하는 거였는데 이런 경우에는 보통 request 처리를 할 때 response.redirected가 true이면 그 url에 새 요청을 보내는 걸로 처리한다고 한다.

근데 내 문제는 뭐였냐면 저렇게 redirection 됨에도 불구하고 redirected: false로 오고 있는 것이 아닌가. 근데 모든 응답의 value가 default value로 오고 있었다. 심지어 url도 '' 빈 스트링이었다. 일단 이 문제를 찾아 보니까 내가 계속 CORS에러를 겪고 있어서 이것 때문에 request option에 mode: 'no-cors'를 선언했다. 근데 'no-cors'를 선언하면 response type이 opaque로 오기 때문에 response가 저렇게 다 비어있다고 한다.

그럼 next.js에서 어떻게 cors 문제를 해결해야 될까? 일단 1차적으로 서버에 cors 오류가 나고 있으니 origin을 풀어달라고 요청해서 수리된 상태였다! 그럼 남은 작업은 클라이언트에서 처리하면 되는데 이건 proxy로 처리할 수 있다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/:path*',
        destination: 'http://localhost:5000/:path*'
      }
    ]
  },
  //...기타 옵션
}

module.exports = nextConfig

next.config.js에 이렇게 rewrites를 사용해서 넣어주면 source에 있는 링크 '/'로 시작하는 url에 요청했을 때 실제로는 http://localhost:5000/ 으로 시작하는 url에 요청이 간다. 물론 여기서 주의해야 할 점은 network tab에서도 해당 주소를 감춰줘서 localhost:3000으로 요청이 간 것처럼 보이지만 사실은 우리가 destination에 입력한 path로 요청이 간다는 것..!