짧은코딩

대부분 개발을 하다보면 cors에러를 접해보게 될 것이다. 이 에러는 백엔드, 프론트엔드에서 모두 해결이 가능하다. 나는 프론트엔드에서 해결할 수 있는 방법을 소개하겠다. 하지만 이 방법은 proxy 방법이라 배포하면 백엔드쪽에서 cors에러를 잡아줘야 한다. proxy 브라우저에서 다른 도메인 서버로 요청을 보내면 cors 에러가 난다. 하지만 서버에서 서버로 보내면 cors 에러가 안난다. 이렇게 서버에서 서버로 보내는 것이 proxy이다. -경로 브라우저 -> 프론트 서버 -> 백엔드 서버 http-proxy-middleware 프론트엔드에서 cors 에러를 해결하기 위해서는 http-proxy-middleware 라이브러리를 사용하면 된다. 사용법 src 폴더에 setupProxy.js 파일을 만..

CORS cors에 대해 알기 위해서는 먼저 sop에 대해 알아야 한다. sop(same-origin policy) sop는 동일 출처 정책으로도 부른다. 불러온 문서, 스트립트의 출처가 다르면 리소스와의 상호장용하는 것을 제한하는 중요한 보안 방식이다. sop는 해로울 수 있는 문서를 분리하여 공격받을 수 있는 경로를 줄여준다. -출처의 정의 두 URL의 프로토콜, 포트(명시한 경우), 호스트가 모두 같아야 동일한 출처이다. 예를 들어서 http://store.company.com/dir/page.html과 출처를 비교하면 이런 결과가 나온다. CORS(Cross-Origin Resource Sharing) CORS는 교차 출처 리소스 공유라고도 하며, 추가 HTTP를 헤더를 사용해 실행 중인 웹 애플..