프론트엔드 개발 시 CORS 오류 해결법

CORS(Cross-Origin Resource Sharing)는 웹 개발에서 자주 마주치는 문제 중 하나다. 이는 보안 상의 이유로 브라우저가 다른 도메인의 리소스에 접근하는 것을 제한하는 정책인데,개발을 할 때 불편을 주기도 한다.
CORS를 우회하기 위해 다양한 대응 전략이 사용됩니다. 이번 글에서는 임시로 CORS 문제를 해결하는 방법을 다뤄보고자 한다.

CORS란

CORS는 Cross-Origin Resource Sharing의 약자로, 웹 페이지에서 리소스가 다른 출처(origin)에서 로드될 때 발생하는 보안 정책으로, 보안을 강화하기 위해 도입되었다.
일반적으로 브라우저는 스크립트에서 다른 출처으로 요청을 보내면, 동일 출처 정책(same-origin policy)에 따라 차단한다. CORS는 이를 완화시켜 다른 출처으로부터 리소스를 요청할 수 있도록 허용한다.

chrome.exe --disable-web-security --user-data-dir=C:\Temp 명령어를 사용해보자

• chrome.exe: Chrome 브라우저 실행을 위한 명령어다.
• -disable-web-security: 이 옵션은 Chrome 브라우저의 웹 보안을 비활성화한다. 이는 보안 정책인 CORS를 우회할 수 있게 한다.
• -user-data-dir=C:\Temp: 이 옵션은 임시로 사용할 사용자 데이터 디렉토리를 설정한다. 보안 정책을 비활성화하는 작업은 잠재적인 보안 위협을 초래할 수 있으므로, 사용자 데이터를 임시 디렉토리에 저장하여 일시적으로 이를 완화하고, 개발 및 테스트 용도로만 사용하는 것을 권장한다.

CORS 문제를 해결하기 위한 여러 방법들

1. 서버 측 수정: 서버에서는 CORS 정책을 조정하여 다른 출처의 요청을 허용할 수 있다.
2. 프록시 사용: 클라이언트와 서버 사이에 프록시를 설정하여 CORS 정책을 우회할 수 있다. 프록시는 클라이언트의 요청을 서버로 전달하고 서버의 응답을 클라이언트에게 반환하는 중간 매개체 역할을 한다.
3. JSONP 사용: JSONP(JSON with Padding)는 CORS와 같은 정책을 우회하기 위한 기술 중 하나이다. 그러나 보안 상의 이유로 사용에 제약이 있으므로 주의해야 한다.
4. 크롬 옵션 활용: 앞서 언급한 -disable-web-security 옵션을 사용하여 CORS 정책을 브라우저에서 비활성화할 수 있다. 다만, 이는 보안상의 위험이 따르므로 개발 시에만 사용하는 것이 좋다.

여러 방법들이 존재하지만, 서버 측을 수정하는 것은 보안 상의 오류가 있을 수도 있기 때문에 일단 되도록이면 개발때만 크롭 옵션을 수정하는 것이 가장 안전한 방법 같다!