CRA 에서 proxy 설정하는법 알아보자

리액트를 사용해서 프론트단에서 서버로 api 요청을 넣을 때 보통의 경우 cors 문제가 일어나게 된다.

 

이때 해결방법은 백엔드에서 cors 설정을 해주는 것 입 보통의 경우 이지만

 

프론트에서도 해결할수 있는 방법이 있다.

 

프록시 설정을 해주면 되는데 이렇게 하게되면 내가 직접 서버에 요청을 보내는 것이 아니라 내가설정한 프록시주소가 서버에 요청을 보내는 형태가 된다 이때 서버쪽과 같은형태의 주소로 설정을 해준다면 same origin 이 되기 때문에 cors 문제가 일어나지 않게 된다.

 

CRA 를 사용하지 않는 다면 webpack을 이용하여 webpack.config.ts 파일에서 > devServer proxy 설정을 해주면 된다.

 

그러나 이번에는 CRA 를 사용하는 경우에는 어떻게 적용할수 있는지 찾아 보았다.

 

 

ㅋㅋㅋ package.json 에서 설정만 해주면 된다 

여러개의 서버를 설정할 수도 있다.

배포할대는 어차피 바꿔줘야 되는 부분이라 개발단계에서는 이렇게 쓰는게 편하지 싶다.

자세한 내용이랑 친절한 설명은 아래 링크가 잘나와있다.

 

출처:ljh86029926.gitbook.io/coding-apple-react/undefined-1/cra

CRA 프록시 서버 설정하는 방법

감사합니다.