cors에러 2

[WEB] CORS의 개념과 해결 방법

출처(Origin)란? CORS를 알아보기 이전에 '출처'라는 것이 무엇인지 먼저 알아야 한다. 출처는 서버의 위치를 뜻하고 프로토콜, 호스트, 포트로 구성되어있다. 우리가 로컬에서 개발하면서 자주 보는 아래 같은 주소를 구분하자면 이렇다. https://localhost:3000 Protocol Host Port 경우에 따라서 이 뒤에 Path, Query string, Fragment가 붙을 때도 있지만 출처(Origin)는 위의 URL구성을 뜻한다. 콘솔로 location객체의 origin프로퍼티를 출력해보면 현재 출처를 알 수 있다. CORS의 뜻 개발을 하다 보면 CORS를 자주 접하게 되는데 이와 관련해서 SOP라는 정책이 있다. SOP는 간단하게 설명해서 같은 출처에서 리소스를 공유할 수 있..

WEB 2022.05.19

[React] 개발과 배포시 cors에러 해결 기록(with. heroku cors-anywhere)

토이 프로젝트가 마무리 단계에 다다라서 배포 단계를 앞두고 있었다. 저번처럼 간단하게 깃페이지를 이용해 배포하려는데 로컬 환경에서는 공공데이터 API를 잘 불러오더니 배포하고 나니 통신 에러가 나는 것이었다. 콘솔을 보기 전에도 UI는 0.1초 정도 잘 나오다 흰 화면만 나오길래 'axios에서 뭔가 문제가 발생했나 보군' 했다. 그제야 생각해보니 로컬에서 개발할 때 cors에러 때문에 package.json에 proxy설정을 해줬었는데 이게 배포 시에는 적용이 안되어서 따로 무슨 처리를 해줘야 한다고 봤었던 기억이 났다. 처음에는 이 상황을 제대로 이해를 못 했는데 그래서 더 많이 헤맸다. 첫 번째로 시도해본 방법은 일단 .env 설정을 추가해주는 것이었다. development와 production ..

토이프로젝트 2022.02.26