Log라이브러리 winston
[Node.js] Logging 라이브러리 winston 적용하기
CORS 에러메시지
출처 : Inpa Dev
악명 높은 CORS 에러메세지
웹개발을 하다보면 반드시 마주치는 에러가 CORS이다. 누구나 한번 쯤 겪게 되는 에러
CORS (Cross-origin-resource-sharing)
나도 이번에 처음 만난 CORS 에러메시지
프론트엔드와 백엔드를 연결하는 과정에서 생긴 CORS라는 에러메시지 !
프론트 입장에선 요청 코드를 이상하게 적은 것도 아니고, 백엔드 입장에선 서버코드나 세팅이 이상한 것도 아니다.
모든게 멀쩡한데 왜 요청한 자료에 대한 응답을 시뻘건 에러줄로 확답하는게 문제다. 😡
CORS 교차 출처 리소스 공유 정책
(Cross-origin-resource-sharing)
여기서 교차 출처 = 엇갈린 다른 출처
Origin 출처란?
우리가 어떤 사이트를 접속할때 인터넷 주소창에 우리는 URL이라는 문자열을 통해 접근하게 된다.
이처럼 URL은 https://domain.com:3000/user?query=name&page=1 과 같이 하나의 문자열 같지만, 사실은 다음과 같이 여러개의 구성 요소로 이루어져 있다.
cors-origin
Protocol(Scheme) : http, https
Host : 사이트 도메인
Port : 포트 번호
Path : 사이트 내부 경로
Query string : 요청의 key와 value값
Fragment : 해시 태크
CORS를 이해하는데 있어 저것들을 모두 알아야 되는 것은 아니고, 딱 3가지만 기억하면 된다.
Origin : Protocol + Host + Port
즉, 출처(Origin) 라는 것은 Protolcol 과 Host 그리고 Port 까지 모두 합친 URL을 의미한다고 보면 된다. 간단하게 자바스크립트로도 현재 사이트의 Origin을 알아낼 수도 있다.
console.log(location.origin); // "https://www.naver.com" (포트 번호 80번은 생략됨)CORS는 "Cross-Origin Resource Sharing"의 약자로, 웹 애플리케이션에서 발생하는 보안 관련 이슈 중 하나입니다. 이 이슈는 웹 브라우저에서 동일 출처 정책(same-origin policy)에 따라 다른 출처(origin)로부터 리소스(예: 스크립트, 폰트, 이미지 등)를 요청할 때 발생한다.
동일 출처 정책은 웹 보안을 유지하기 위해 설계되었으며, 기본적으로 웹 페이지가 다른 출처의 리소스에 접근하는 것을 금지한다. 이것은 다른 출처에서의 데이터 접근 및 조작을 방지하기 위한 중요한 보안 메커니즘이지만, 때로는 다른 출처로의 요청이 필요한 상황이 발생한다.
CORS 에러는 이러한 상황에서 발생하는데, 웹 브라우저가 웹 페이지에서 다른 출처의 리소스를 요청할 때 해당 출처가 요청을 허용하지 않을 때 발생한다. 이러한 경우 웹 브라우저는 보안 상의 이유로 요청을 차단하고, 개발자 도구 또는 브라우저 콘솔에서 CORS 에러 메시지를 표시한다.
CORS 에러를 해결하기 위해 다음과 같은 방법을 고려할 수 있다:
-
서버 측에서 CORS 설정: 웹 서버에서 CORS 헤더를 추가하여 특정 출처의 요청을 허용하도록 설정할 수 있다.
-
JSONP 사용: JSONP(JSON with Padding)는 CORS를 우회하기 위한 기술로, 서버에서 JSON 데이터를 콜백 함수로 래핑하여 요청에 응답하는 방식이다.
-
프록시 서버 사용: 다른 출처의 리소스에 대한 요청을 프록시 서버를 통해 보내는 방법을 고려할 수 있다.
-
브라우저 확장 기능 사용: 일부 브라우저 확장 기능은 CORS를 해결하기 위한 도구를 제공한다.
CORS 에러는 보안상의 이유로 중요하며, 웹 애플리케이션을 개발할 때 이를 고려해야 한다.
