[CS] CORS란 무엇일까? CORS 개념

프론트와 백엔드를 연동하는 과정에서 발생한 CORS에러

API를 테스트 할 땐 에러가 나지 않는데 왜 연동만 하면 CORS에러가 나는 것 일까?

CORS에러가 뭔지 왜 발생하는 것인지에 대해 차차 알아가 보겠습니다

CORS(Cross-Origin Resource Sharing)

다른 출처에 리소스 요청시 접근 권한을 부여하는 메커니즘

 

추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출러의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다

 

CORS 기본 동작 원리

1. 클라이언트 HTTP 요청

• 요청 헤더에 Origin 정보를 담아서 전달합니다

2. Server 응답

• 서버에서 해당 요청에 대한 응답 시 응답 헤더에 Access-Control-Allow-Origin 정보를 담아 클라이언트로 보냅니다

3. 클라이언트에서 Origin 과 서버가 보내준 Access-Control-Allow-Origin 비교

• 응답을 받은 브라우저는 자신이 보냈던 요청의 Origin 과 서버가 보내준 응답의 Access-Control-Alow-Origin 을 비교한 후 차단할지 말지 결정합니다
• 만일 유효하지 않다면 응답을 하지 않고 CORS에러를 띄웁니다

 

즉,CORS에러는 도메인이 서로 다른 사이트가 데이터를 주고 받을 때기에 발생한 문제였습니다

이러한 CORS에러를 해결하는 방법엔 어떤 것이 있을까요?

---

How to Resolve CORS Issue

정석적인 방법은 서버에 해결하는 방법이라고 합니다

서버에서 Access-Control-Allow-Origin 헤더에 유효한 값을 포함하여 응답을 브라우저로 보내면 CORS 에러를 해결할 수 있습니다

 

spring의 경우를 예시로 하자면 

 

 

이런 식으로 CORSConfig를 따로 설정해주어 에러를 해결하였습니다