웹 개발 중에 CORS(Cross-Origin Resource Sharing) 에러는 자주 마주치는 문제입니다. 이 에러는 브라우저의 보안 정책으로 인해 발생하며, 서버와 클라이언트 간의 다른 출처에서 리소스를 공유할 수 있도록 하는 규칙에 관련된 문제입니다. 이번 글에서는 CORS 에러 메시지의 종류와 각각의 의미를 살펴보겠습니다.
에러 메시지
1. Preflight Request가 실패했습니다
이 에러는 클라이언트가 사전 요청(preflight request)을 보냈지만, 서버에서 허용되지 않은 메서드나 헤더를 사용했을 때 발생합니다. 이는 보안을 위해 브라우저가 추가적인 요청을 보내기 전에 서버로부터 허용 여부를 확인하기 위한 절차입니다. 이때 서버는 요청을 수락할지 거부할지에 대한 응답을 보내게 됩니다. 따라서 이 에러는 서버 측에서 CORS 정책을 적절하게 설정하지 않았을 때 발생합니다.
2. Origin이 서버에 허용되지 않았습니다
이 에러는 클라이언트의 출처(origin)가 서버에서 허용되지 않을 때 발생합니다. 서버 측에서 출처를 허용하는 설정이 제대로 되어 있지 않은 경우에 이러한 문제가 발생할 수 있습니다.
3. Credentials과 Origin을 같이 사용할 수 없습니다
이 에러는 withCredentials 설정을 사용하여 인증 정보를 포함한 요청을 보내었을 때, 서버에서 CORS 정책에 따라 이를 허용하지 않을 때 발생합니다. 이 경우, 서버 측에서 알맞게 설정을 변경해야 합니다.
해결 방법
이러한 CORS 에러를 해결하기 위해서는 서버 측에서 CORS 정책을 올바르게 설정하여 클라이언트의 요청을 허용해야 합니다. 이를 위해 서버에서는 다음과 같은 작업이 필요합니다.
- Access-Control-Allow-Origin 헤더 설정: 서버 응답에 이 헤더를 포함하여 클라이언트 출처를 허용해야 합니다.
- Preflight 요청에 대한 응답 처리: 클라이언트의 사전 요청에 대해 적절한 응답을 보내야 합니다.
- withCredentials 설정 처리: 인증 정보를 포함한 요청에 대한 처리를 적절하게 해주어야 합니다.
이러한 작업을 통해 CORS 에러를 해결할 수 있습니다.
CORS 에러는 보안을 위하여 중요한 정책이지만, 올바르게 설정되지 않으면 개발 및 배포 단계에서 불편함을 초래할 수 있습니다. 따라서 AWS, Azure와 같은 클라우드 서비스를 이용하거나, Express와 같은 서버 프레임워크를 사용하는 경우, 각 플랫폼 및 프레임워크의 공식 문서를 참고하여 CORS 정책을 올바르게 설정하는 것이 좋습니다.
간단한 설정을 통해 CORS 에러를 해결하고, 안전한 웹 애플리케이션을 제작할 수 있습니다.
참고 문헌
- MDN Web Docs - Cross-Origin Resource Sharing (CORS)