1015- 이미지 다루기

[leegeon4]

*db.json 에 users 배열에 각 객체가 img 프로퍼티에 이미지 파일명 저장

• json-server 는 public 폴더를 url 로 접근 가능하게 합니다. 이미지 불러오기는 여기에 저장해서 브라우저에 출력 시킬수 있습니다.
• json-server 를 이용한 서버 업로드는 불가능. 스프링 부트 13 upload 프로젝트를 활용.

[leegeon4]

CORS(Cross-Origin Resource Sharing, 교차 출처 자원 공유)는 웹 브라우저에서 악성 동작을 방지하기 위해 구현된 보안 기능으로, 다른 도메인에서 웹 서버의 리소스가 요청될 때 이를 제한합니다. 이를 통해 한 도메인(origin)에서 실행되는 웹 애플리케이션이 명시적으로 허용되지 않은 경우 다른 도메인의 리소스를 요청하지 못하도록 합니다.

CORS 작동 방식

웹 애플리케이션이 다른 출처(다른 프로토콜, 도메인 또는 포트)로 HTTP 요청을 보낼 때 브라우저는 서버의 응답에 적절한 CORS 헤더가 포함되어 있는지 확인합니다. 헤더가 요청을 허용한다고 명시하면 브라우저는 응답을 처리합니다. 그렇지 않으면 요청이 차단됩니다.

주요 CORS 헤더

• Access-Control-Allow-Origin: 어떤 출처가 리소스에 접근할 수 있는지를 지정합니다. *는 모든 출처를 허용하고, 특정 도메인은 해당 도메인만 허용합니다.
• Access-Control-Allow-Methods: 허용되는 HTTP 메서드(예: GET, POST, PUT)를 지정합니다.
• Access-Control-Allow-Headers: 실제 요청 시 사용할 수 있는 헤더를 지정합니다.
• Access-Control-Allow-Credentials: 요청에 쿠키와 같은 자격 증명이 포함된 경우 응답을 공유할 수 있는지 여부를 나타냅니다.

[leegeon4]

위설명에서 다른도메인www.naver.com 도메인 이름.localhost:8080을 localhost5173이 접근하려고 하는 것도 포트가 다르기 때문에 다른 도메인입니다. cors 헤더 응답값을 설정해줍니다

[leegeon4]

• 파일 업로드 할때, 스프이부트 서버에서 cors 헤더값을 설정하지 않으면 정상적인 200 응답을 받을수 없습니다.(파일업로드는 됩니다.)
• 이 경우에 개발자도구 네트워크 탬에서 reactApp url 에 대한 응답이 cors Error 으로 보입니다.