보통 개발환경의 주소는 http://localhost:3000을 사용한다.
Api 서버의 주소가 https://dev-api.com 일때, 따로 cors 설정을 해놓지 않는다면, cors 에러가 난다.
CORS
일반적으로 브라우저는 보안 문제상의 이유로 동일 출처 정책(SOP)을 따른다.
요청 URL과 응답 URL 두 URL의 프로토콜, 호스트, 포트가 모두 같아야 동일 출처로 볼 수 있다.
출처가 다른 호스트로 데이터를 요청하는 경우 CORS 정책을 위반하게 된다.
예를 들어 a-url.com 페이지에서는 b.url.com 호스트로 데이터를 요청할 수 없다.
proxy
proxy는 웹팩 개발서버로, proxy를 통해 브라우저에서 API 를 요청 할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 개발서버의 주소로 요청할 수 있다.
proxy 구축하기
SPA에서는 proxy를 사용해 CORS 정책을 우회할 수 있다.
브라우저는 리액트 애플리케이션으로 데이터를 요청하고, 리액트는 해당 요청을 백엔드로 전달한다. 이후 리액트가 백엔드로부터 받은 응답 데이터를 다시 브라우저로 재전달 하므로 브라우저는 CORS정책을 위배했는지 모른다.😏
CRA(create-react-app)로 react 어플리케이션을 만들고 있다면,
이미 설치되어 있는 react-scripts로 간단하게 proxy설정을 해줄 수 있다.
package.json 파일 안에
{
“proxy” : “localhost:8080”
}
다음과 같이 proxy와 요청 url을 적어주면 된다.
참고 : https://junhyunny.github.io/information/react/react-proxy/
https://react.vlpt.us/redux-middleware/09-cors-and-proxy.html
'Front-end > React' 카테고리의 다른 글
[React] 디바운싱 적용하여 자동 계산 성능 개선하기 (0) | 2023.03.21 |
---|---|
[React] hooks로 모듈화하여 변경에 유연한 컴포넌트 만들기 (0) | 2023.02.11 |
[Next] create-next-app 분석하기 (0) | 2022.08.14 |
[React] .env로 개발/배포 환경 설정하기 (0) | 2022.07.01 |
[React] 커스텀 훅을 사용한 DefualtModal 만들기 (0) | 2022.06.16 |