🐌 CORS란
'교차 출처 리소스 공유'라고 불리는 CORS(cross-origin resource sharing)는 웹 브라우저가 자신의 출처가 아닌 다른 출처(도메인, 포트 등)로부터 리소스를 얻는 것을 서버가 제어하는 보안 메커니즘(정책)입니다.
- MDN Web Docs
기본적으로 웹 브라우저는 보안을 위해 동일한 출처의 리소스에만 접근할 수 있는 동일 출처 정책(same-origin policy)을 따릅니다.
이때 CORS는 동일 출처 정책을 완화하여, 서버가 허용한 경우라면 A라는 출처에서 로드된 웹 페이지가 다른 출처의 리소스에 접근할 수 있도록 해줍니다.
이를 위해 서버는 반환할 응답에 특정한 http 헤더를 포함하여 웹 브라우저의 요청을 허용할지 결정합니다.
만약 다른 출처의 리소스에 대한 요청이어도 cors 정책을 준수했다면 해당 요청은 허용될 수 있습니다.
🐌 CORS 에러란
CORS 에러는 CORS 정책에 의해 차단된 요청을 의미합니다. 클라이언트 측 웹 페이지가 다른 출처의 리소스에 접근하려고 할 때, 해당 요청이 허용되지 않아 발생하는 에러입니다.
예를 들어, 'https://domain-a.com'의 프론트엔드 자바스크립트 코드가 fetch()를 사용하여 다른 도메인인 'https://domain-b.com/data.json'에 자원을 요청하는 경우를 말합니다.
cors 에러가 발생하는 상황은 다음과 같습니다.
- 웹 브라우저가 다른 출처에서 호스팅된 API에 데이터를 요청하는 경우
- https에서 http로 리소스를 요청하는 경우
- 웹 페이지에서 외부 출처에 위치한 리소스를 로드하는 경우
- 자바스크립트를 통해 XMLHttpRequest나 fetch API로 인증 정보가 포함된 요청을 보내는 경우
- 서버가 cors 관련 헤더를 포함하지 않은 응답을 보내는 경우
- 브라우저가 허용하지 않은 http 메서드나 커스텀 헤더가 포함된 요청을 보내는 경우
cors 에러 메시지에 대한 설명은 MDN Web Docs를 참고해주세요
🐌 해결 방법
1) 서버에서 cors 헤더 설정하기
가장 일반적인 방법으로 서버 측에서 cors 헤더를 설정하여 도메인에서 오는 요청을 허용하는 것이 있습니다.
다음은 허용하는 도메인을 정의하는 코드입니다.
// 모든 도메인의 요청을 허용하는 경우
Access-Control-Allow-Origin: *
// 특정 도메인(https://example.com)의 요청만 허용하는 경우
Access-Control-Allow-Origin: https://example.com아래는 특정한 요청 메서드 또는 커스텀 된 헤더를 허용하도록 정의하는 코드입니다.
// 허용되는 메서드를 설정하는 경우
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
// 허용되는 헤더를 설정하는 경우
Access-Control-Allow-Headers: Content-Type, Authorization
// +) 브라우저가 인증 정보가 포함된 요청을 보내는 경우
Access-Control-Allow-Credentials: true
2) 프록시 서버 사용하기
해당 방법은 cors 에러를 우회하는 방법입니다.
프록시 서버는 클라이언트와 타깃 서버 사이에 위치하며 모든 출처에 대한 요청 및 응답을 허용합니다.
따라서 클라이언트가 보내는 요청을 프록시 서버가 대신 타겟 서버에게전달해 주고, 받은 응답을 다시 클라이언트에게 반환해 줍니다.
3) 브라우저 설정 변경하기
해당 방법은 개발 환경에서만 일시적으로 cors 정책을 우회하는 방법입니다.
아래 과정을 따라가면 크롬 브라우저에서 cors 정책을 일시적으로 해제할 수 있습니다.
1. 터미널에서 Chrom.exe가 위치한 폴더로 이동합니다.
2. 해당 폴더에서 다음 명령어를 실행합니다.
chrome.exe --disable-web-security --user-data-dir=C:\Temp\3. 명령어가 실행되며 나온 크롬 페이지에서 테스트를 진행합니다.
참고로 보안 문제가 발생할 수 있기 때문에 개발 환경에서만 사용해야 합니다.
4) 크롬 확장 프로그램 사용하기
크롬은 3번 방법과 마찬가지로 개발 환경(로컬)에서 cors 정책을 일시적으로 해결할 수 있습니다.
크롬 웹 스토어에서 'Allow CORS: Access-Control-Allow-Origin'이라는 확장 프로그램을 다운로드하면, 메뉴에서 해당 프로그램을 활성 및 비활성화시킬 수 있습니다.
더 자세한 내용은 다음 블로그를 참고해주세요
읽어주셔서 감사합니다:)
