nextjs proxy 적용해서 cors 우회하기

보안 정책에 의거해 프로덕션 서버에서 localhost를 cors처리해 둔상황에서 유용한 방법을 소개한다.

cors는 서버 to 브라우저에서 발생하는 오류니 dev환경에서 localhost에 띄워둔 next server를 proxy로 우회하는 방법이다.

      

      

      

    
    

      <javascript />
    
const nextConfig = {
	async rewrites() {
		if (process.env.NODE_ENV !== "development") {
			return [];
		}
		return [
			{
				source: "/proxy/:path*",
				destination: `${process.env.NEXT_PUBLIC_SERVER_URL}/:path*`,
			},
		];
	},
}
export default nextConfig

 

이처럼 구성하면 dev 환경에서만 cors를 우회할 수 있다.

참고로 저 destination에 진짜 도메인 꼭 넣어야한다. 저기 동적으로 넣어봤자 제대로 작동 안 한다.

/proxy/로 만든 이유는 next api route를 사용 중이라서... 맘대로 넣어도 된다 어차피 localhost/머시깽이 로 보내는 거 잡는 거니까