nextjs proxy 적용해서 cors 우회하기

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

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

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/머시깽이 로 보내는 거 잡는 거니까