리액트 CORS 오류 해결 방법

Access to XMLHttpRequest at '주소A' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

리액트로 api를 받아와서 프로젝트를 하던 중 위와 같은 오류가 나타났고, 이를 검색해보니 CORS 문제라고 한다.

CORS(Cross-Origin Resource Sharing)는 교차 출처 리소스 공유라는 기능으로, 실행 중인 웹 어플리케이션이 다른 출처의 리소스에 접근할 수 있는 권한을 부여할 수 있도록 웹 브라우저에 알려주는 기능이다.

 

이는 웹팩에서 간단한 방법으로 Proxy 기능을 지원해준다고 한다. 

{
	proxy: "접속하고자 하는 서버의 루트 URL"
}

그리고 실제로 request를 전송하는 코드에서 루트 URL을 뺀 나머지 부분을 요청하면 된다고 한다.

 

출처

https://snowdeer.github.io/openshift/2020/06/13/react-for-cors-using-proxy/

React CORS 문제 해결하기(Proxy 이용) · snowdeer's Code Holic

 

위의 블로그를 보고 해결했다 정말 생명의 은인이시다,,,,,,,,,,,,, 감사합니다ㅠㅠ