교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.
CORS 에러를 해결하려면 프론트엔드 개발자가 백엔드 개발자에게 프론트엔드 개발 서버 도메인을 허용 해달라고 요청하면 백엔드 개발자가 응답 헤더에 필요한 값들을 담아서 전달을 해줘야 한다.
위에서 설명한 정석적인 과정 없이 React 라이브러리, 혹은 Webpack Dev Server에서 제공하는 proxy 기능을 사용하면 CORS 정책을 간편하게 우회할 수 있다. 별도의 응답 헤더를 받을 필요 없이 브라우저는 React 앱으로 데이터를 요청하고, 해당 요청을 백엔드로 전달한다. 즉, 브라우저를 proxy 기능을 통해 속이는 것이다.
"proxy": "우회할 API 주소(서버 주소)"
export async function getAllFetch() {
const response = await fetch('/params'); // 도메인 제거
.then(() => {
...
})
}
https://xionwcfm.tistory.com/340 을 참고해 해결
// .env 파일 추가
DANGEROUSLY_DISABLE_HOST_CHECK=true