개요
팀프로젝트를 진행할 때 백엔드와 데이터를 주고받을 때 선택할 수 있는 방법은 크게 2가지가 있다.
- 백엔드가 배포한 서버에서 API에 접근하여 데이터를 가져와가며 테스트
- 백엔드의 코드를 가져와 localhost 환경에서 테스트
- json-server와 같은 환경을 고려하지 않겠다.
최근 팀프로젝트를 진행하는데 1번과 같은 방식으로 진행했다.
근데 문제가 발생했다. 뭐만하면 자꾸 CORS 에러가 발생하는 것이다...그래서 CORS에 대해 조사해봤다.
CORS??
- Cross-Origin Resource Sharing의 약자
- 웹 브라우저가 다른 출처(도메인, 프로토콜, 또는 포트)에서 리소스를 요청할 때 발생하는 보안 기능
- 예를 들어 https://example.com에서 호스팅된 웹 페이지가 https://api.example.com와 같은 곳에서 데이터를 요청하려고 할 때 CORS 오류가 발생할 수 있음
브라우저가 사용자의 보안을 위해 기본적으로 다른 출처의 리소스를 차단하기 때문
출처 : GPT
아...보안을 위해 허용되지 않은 출처에서 데이터를 요청하면 차단하는 건가보다..
사실 Spring boot를 공부할 때 Origin을 설정해본적이 있긴하다..(Origin(*)로 다 열어줬는데 그러면 CORS가 의미가 없잖아? 권한은 최소한으로 열어놓자.)
CORS 에러가 발생하는 원인
- 그럼 이제 CORS 에러가 발생하는 경우의 수에 대해 알아보자
1. 출처가 다른 도메인 또는 포트로 리소스를 요청할 때
CORS 정책에 따라, 출처가 다른 도메인이나 포트에서 리소스를 요청하는 경우에는 브라우저에서 CORS 에러가 발생한다. 이 경우에는 서버 측에서 Access-Control-Allow-Origin 헤더를 설정하여 요청을 허용해야 한다.
2. HTTPS에서 HTTP로 리소스를 요청할 때
보안상의 이유로 HTTPS에서 HTTP로 리소스를 요청하는 경우에도 CORS 에러가 발생할 수 있다. 이 경우에는 HTTPS로 통신하는 서버에서 HTTP로 요청을 전달하는 것이 아니라, HTTPS로 전달해야 한다.
3. 인증 정보를 포함한 요청을 보낼 때
CORS 정책에 따라, 인증 정보를 포함한 요청을 보낼 때에는 서버에서 Access-Control-Allow-Credentials 헤더를 설정해야 한다. 이 헤더가 설정되어 있지 않으면 브라우저는 인증 정보가 포함된 요청을 거부한다.
4. 허용되지 않은 메서드를 사용할 때
CORS 정책에 따라, 허용되지 않은 메서드를 사용하는 요청을 보내는 경우에는 CORS 에러가 발생한다. 이 경우에는 서버에서 Access-Control-Allow-Methods 헤더를 설정하여 요청을 허용해야 한다.
5. 허용되지 않은 헤더를 사용할 때
CORS 정책에 따라, 허용되지 않은 헤더를 사용하는 요청을 보내는 경우에도 CORS 에러가 발생한다. 이 경우에는 서버에서 Access-Control-Allow-Headers 헤더를 설정하여 요청을 허용해야 한다.
6. 프리플라이트 요청에 대한 응답이 없는 경우
브라우저는 CORS 정책을 준수하기 위해, 프리플라이트 요청을 보내고 서버에서 이에 대한 응답을 받아야 한다. 이 때, 서버에서 응답이 없는 경우에는 CORS 에러가 발생한다. 이 경우에는 서버에서 프리플라이트 요청에 대한 응답을 보내도록 설정해야 한다.
7. 브라우저가 CORS를 지원하지 않는 경우
일부 오래된 브라우저에서는 CORS를 지원하지 않는 경우가 있다. 이 경우에는 서버 측에서 다른 방법을 사용하여 요청을 처리해야 한다.
8. CDN 등에서 제공하는 리소스를 요청할 때
일부 CDN 등에서 제공하는 리소스를 요청할 때에도 CORS 에러가 발생할 수 있다. 이 경우에는 CDN 서비스 제공 업체에서 CORS 설정을 제공하고 있으므로 해당 설정을 확인해야 한다.
9. 브라우저 설정 문제
일부 브라우저에서는 CORS 에러가 발생하는 경우가 있는데, 이는 브라우저 설정에서 발생하는 문제일 수 있다. 이 경우에는 브라우저 설정을 확인하거나, 다른 브라우저를 사용하여 문제를 해결할 수 있다.
출처 : https://www.jeong-min.com/30-cors-fe/
경험상 1번이 가장 많은거 같다.
내가 테스팅하려는 주소를 서버 개발자에게 Origin을 열어달라고 해보자.
- 실제로 저번에 삽질하다 백엔드 개발자에게 혹시 Origin 열어주셨나요? 했는데, 안 열어두었다. 혼자 고생하지말고 소통을 자주하자.. 삽질하는 시간이 줄어 개발속도가 꽤 많이 향상된다.
어...이렇게 말하면 서버 개발자에게 부탁하는 것말고 방법이 없어보인다.
그럼 프론트 개발자가 혼자 시도해볼 수 있는 방법은?
- 웬만한 방법은 위의 블로그에 잘 정리되어있어 내가 느낀점만 적어보겠다.
이게 진짜 CORS인지 판별
- 서버로 접속하려는 URL만 잘못 입력해도 CORS가 발생한다. 잘못된 URL 경로로 접근을 시도해도 CORS가 발생했다. 실제로 /를 1개 더 작성해서 CORS가 발생한 적이 있다.
오타를 한 번 더 점검하자.. - 진짜 안되면 걍 서버 코드 싹다 가져와서 실행해보는 것도 방법
CORS에 너무 시간을 뺏길거면 그냥 백엔드 분의 코드를 가져와 localhost로 가져와서 실행해보는 것도 방법이라 생각한다. 그랬는데도 문제가 발생하면 그냥 코드에 문제가 있는거다.
그랬는데 만약 문제가 없다면..CORS 문제일 확률이 높다고 생각한다.
결론
- 백엔드랑 잘 소통하자
- 원인을 정확히 판별하자( 발생한 CORS인지? 정말 CORS 문제인지?)
CORS의 동작 방법과 같은 것보다 실제 개발하면서 마주한 CORS문제를 어떻게 해결했는지 초급 개발자 입장에서 정리해봤다.
CORS에 대한 더 자세한 내용은 추가로 학습하려 한다.
이 글은 당장 빨리 CORS 에러를 해결해야하는 초급 프론트엔드 개발자에게 도움이 되기를 바란다..
