[NextJS] NextJS에서의 proxy설정

1. React와는 다른 설정

CRA+Typescript조합에서의 proxy설정은 매우 간단했다. 앞선 포스팅에도 언급했듯이 그저 package.json파일에 

"proxy": "http://localhost:5000/"

다음과 같은 한 줄만 추가하면 되었다. 저기서 주소는 내가 설정한 백엔드 서버의 주소로 port번호가 5000이 아니어도 괜찮다. 나는 express서버를 5000번 포트에서 열기로 했으므로 다음과 같이 설정해주었다. 

하지만 nextjs에서는 proxy설정이 조금 달라진다. 

 

2. next.config.js의 수정

nextjs에서 proxy설정을 해주려면 다음과 같은 코드만 작성해주면 간단히 끝난다. 

 

1. next.config.js 

module.exports = {
	async rewrites() {
		return [
			{
				source: "/:path*",
				destination: "http://localhost:5000/:path*",
			},
		];
	},

다음과 같은 내용을 적어주면 쉽게 localhost3000주소에서 localhost5000주소로 요청을 보내도 proxy로 CORS정책을 우회할 수 있다. 

 

3. 결과

 1. 요청

나는 nextjs에서 작성된 프론트엔드 단에서 express로 axios를 사용해서 요청을 보냈다. 성공하면 요청성공이라는 alert를 띄운다. 

2. 응답

express에서는 다음과 같이 요청 성공!이라는 문구를 보내주기로 했다. 

3. 결과

성공적으로 요청 성공이라는 alert창이 떴다. 

네트워크 탭을 확인해보면 요청 성공!이라는 메시지가 와있는 것을 확인할 수 있었다.