![]()
프로젝트 중 imageURL을 사용하여 다운로드 버튼을 누르면 이미지가 다운로드할 수 있게끔 하는 기능을 만들어야 했다. 위 기능을 구현하면서 겪은 어려움은 크게 2가지였다. 1. 서버에서 오는 imageURL을 그대로 href 속성에 넣어주면 제대로 동작하지 않는다. 2. 1.을 해결하기 위해 imageURL url을 fetch 해줬어야 했는데, CORS에러가 발생했다. 해결방법을 블로그에 남겨 정리해보려고 한다. 1. 서버에서 오는 imageURL을 그대로 href 속성에 넣어주면 제대로 동작하지 않는다. 먼저 첫번째 문제를 해결해 보자. 방법은 간단하다. 태그 href에 경로와 download 속성에 저장될 파일 이름을 지정해 주면, 다운로드가 가능하다. 그런데, 서버에서 오는 imageURL을 그..
보통 개발환경의 주소는 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 를 요청 할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 ..
