[Project] Hobbyt - Proxy 설정하는 법 (CORS, 404 not found)

Next.js와 typescript 를 사용하고 있습니다.

프로젝트를 진행하면서 주도적으로 나서서 proxy 설정을 적용해 본적이 없어서 이번에 제대로 어려움을 겪게 되었네요.

처음엔 http-proxy-middleware를 다운 받아 설정해 봤지만 404 not found 에러가 뜨며 생각한대로 되지 않았습니다.

이유는 타입스크립트로 적용하는 방식으로 하고 있었기 때문인데요. 문득, Next.js 강의에서 봤었던 rewrites() 가 떠올랐습니다. 구글링을 통해 실제로 proxy 설정할 때 사용이 되고 있다는 것을 알 수 있었습니다. 다른 사람들이 적용하는 대로 따라해봤지만 이상하게도 계속 404 not found 에러가 떴습니다.

구글링을 해 봐도 원하는 정보를 찾지 못해 유튜브에서 영상을 찾아보다가 해결 방법을 찾게 되었습니다. (참고) (참고2)

수정 전 코드

/** @type {import('next').NextConfig} */
module.exports = () => {
  reactStrictMode: true,
  const rewrites = () => {
    return [
      {
        source: "/api/:path*",
        destination: "http://localhost:8080/api/:path*",
      },
    ];
  };
};

수정 후 코드

/** @type {import('next').NextConfig} */
module.exports = () => {
  const rewrites = () => {
    return [
      {
        source: "/api/:path*",
        destination: "http://localhost:8080/api/:path*",
      },
    ];
  };
  return {
    rewrites,
  };
};

공식 문서를 보고 따라하고 있었는데 return 을 안 해줘서 생긴 문제였습니다... ㅎㅎ...