이미지 업로드 [IBM]

1️⃣ 통신 원리 :

1. 프론트에서 이미지를 form data로 s3에 저장해달라는 요청을 보낸다. 저장된 이미지에 대한 file name을 받는다.
2. 이 file name과 생성에 필요한 정보를 담아서 포스팅 생성(등록) api를 요청한다.

2️⃣ 사용 이유 :

이미지는 원래 사용자가 업로드하자마자 api 호출을 통해서 클라우드에 저장하는 경우도 많다.

velog라는 블로그 사이트인데 보시다시피 이미지를 옮겨 넣자마자 클라우드 cdn에 저장되고 url로만 관리되고 있어요

이유는 현재 서버 구조가 client -> spring -> fastapi로 요청이 전달되는 구조인데 상대적으로 무거운 이미지 데이터를 계속 들고다니는 것보다 클라우드에 저장해놓고 URL 형태로 들고다니는게 효율적이라고 판단했다. + 그러면 동일한 S3를 공유하는게 더 자연스러울 것 같다

3️⃣ 트러블 슈팅

현재 local에서 쐈을 때 서버에 정상적으로 요청오는것 확인했고, 실제로 모든 오리진이 허용되어있었다.

• 1차 시도

  • 서버에서 제공한 헤더를 억지로 구겨서 넣어봤다. 결과는 똑같은 cors error

  

  

• 2차 시도

  • 서버가 응답헤더에 담은 origin과 클라이언트가 요청에서 담은 origin을 비교해보았다.
  • 서버에서는 허용 url을 올바르게 담아서 보냈다. 클라이언트도 마찬가지로 올바르게 보내고 있었다.

  

• 3차 시도

  • 유신이의 credential mode 뭘로 설정되어있나요? 질문으로 Access-Control-Allow-Credentials 값을 다시 보았고, 서버에서 모든 오리진을 허용했는데 그러면 credential 값이 false 이어야 한다 했다. 즉, 헤더에 쿠키를 담을 수 없음! 지금은 쿠키를 안 사용하니까 false로 다시 바꿔봤다.

  

  성공

  

  <aside> ⚠️ @김유신

  내가 의문인건! 스프링하고 fastAPI 둘 다 origin *로 설정해줬는데 헤더에 넣어주는 값? 방식이 다른 거?

  

  스프링은 헤더에 요청한 origin이 담겨오고 fast api 는 *로 오는거 같아서 생긴 문제

  </aside>