omaeng

이번 포스팅에서는 요청에 Cross-Origin-Resource Sharing(CORS) 헤더를 포함하여 응답하는 웹서비스를 배워 보겠습니다! CORS란? https://developer.mozilla.org/ko/docs/Web/HTTP/CORS 교차 출처 리소스 공유 (CORS) 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다. developer.mozilla.org 교차 출처 리소..

Front와 Back을 나눠서 개발하는 경우 데이터의 자료형이 발목을 잡는 경우가 많다. 자주 사용하는 Int와 String은 자료형이 고정적이라 에러가 자주 발생하지 않지만, API를 자세하게 읽어보지 않은 경우 그리고 API가 친절하게 설명되지 않은 경우 에러가 발생한다. React로 웹 어플리케이션을 만들고 Back에 있는 데이터와 상호작용 할때 date format 이슈에 대해 해결한 방법을 공유하고자 한다. 문제상황 HyperText Transfer Protocol (HTTP) 400 Bad Request 응답 상태 코드는 서버가 클라이언트 오류(예: 잘못된 요청 구문, 유효하지 않은 요청 메시지 프레이밍, 또는 변조된 요청 라우팅) 를 감지해 요청을 처리할 수 없거나, 하지 않는다는 것을 의미..

개발을 하던 중 만난 CORS(Cross-Origin Resource Sharing): 교차 출처 자원 공유 에러를 해결한 방법을 공유하겠습니다. CORS(Cross-Origin Resource Sharing)이란 동일한 출처(최초 자원이 서비스된 출처)가 아니여도 다른 출처에서의 자원을 요청하여 쓸 수 있게 허용하는 구조를 뜻한다. 보통 보안상의 이슈(DOM을 통한 취약한 데이터 접근 시도) 대문에 동일 출처 원칙을 기본적으로 웹에서는 준수하게 됩니다. 따라서 최초 자원을 요청한 출처 말고 다른 곳으로 스크립트를 통해 자원을 요청하는 것은 금지됩니다. CORS를 적용하려면 웹 어플리케이션과 서버 어플리케이션에서 그에 따른 처리를 해줘야 합니다. @CrossOrigin 기존 소스 @RestControll..