개발과 일상

문제 상황FE에서는 그동안 CloudFront URL로 만들어진 이미지 URL을 BE로부터 전달 받아서 img 태그에 넣어주기만 했었다. 그런데 이번 개선으로 이미지를 다운로드를 받아서 사용할 일이 생겼다. 그런데 웬걸 CORS 에러가 발생하기 시작했다. FE에서는 fetch를 이용해 이미지를 blob형태로 받으려 했고, 이 과정에서 CORS가 발생했다고 한다. 이 문제의 원인을 찾아가는 과정이다. 문제 분석1. CloudFront에서 특정 HTTP Method를 막아놨나?- 이전에 CloudFront로 POST 요청이 필요한 경우가 있었는데, 이 Method가 막혀 있을 때 비슷한 에러가 났었다.그러나 fetch는 GET 방식이고, CloudFront에서 GET 방식은 무조건 열려있다.  2. S3의 ..

이번 주에 발생했던 따끈따끈한 문제 문제 상황은 이렇다. 1. 비로그인 사용자를 구분하기 위한 id를 부여하고 싶다. 2. id를 어디서 부여하고 저장할까? - 보안상의 이유로 단순 로컬스토리지보다는 쿠키에 저장하는 게 좋을 것 같다. 3. 누가 쿠키를 발행할 것인가? fe가 가능할 것 같다고해서 별 생각 없이 ok 4. fe 서버에서 쿠키에 강제로 domain을 부여하니까 localhost에서 쿠키를 사용할 수 없는 문제 발생 5. 결국 서버에서 쿠키를 만들기로 하는데.... 결론부터 이야기하자면 모두가 쿠키에 대한 제대로된 지식이 없어서 발생한 문제였다. 정확히는 Thirdparty cookie와 cookie의 도메인에 대한 지식이 부족했다. 어떤 문제가 발생했는지 차근 차근 밟아나가보자. 이슈 1...

흔히 볼 수 있는 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS) 에러... CORS를 간단히 정리하면 아래와 같다. CORS는 다른 도메인 간에 리소스를 공유할 때 발생하는 보안상의 이슈를 해결하기 위해 만들어진 매커니즘. 웹 브라우저에서는 보안상의 이유로 다른 출처(Origin)에 있는 리소스를 직접 요청할 수 없다. 자세히 정리된 곳은 많으니 따로 정리하진 않겠다. 스프링 프레임워크에서는 간단히 해결이 가능하다. @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registr..