[Error] Cors Error 해결

프론트엔드 개발을 해봤다면 한번 쯤 만나봤을 Cors Error .. 

맨날 아 코스 .. ;; 라고만 하지 왜 Cors Error가 나는지 궁금해서 찾아봤는데 

CORS Error : Cross-Origin Resource Sharing 

- 교차 출처 리소스 공유 에러 

 

🤓CORS Error의 동작 과정
1. HTTP 요청을 하면 브라우저는 요청 헤더에 Origin 이라는 필더를 추가
2. 이후 서버는 응답을 내려줄 때 응답 헤더에 access-control-allow-origin* 이라는 필드를 내려줌
3. 브라우저는 응답을 반환하기 전에 Origin 과 access-control-allow-origin 값을 비교하여 유효성을 검증 
*access-control-allow-origin : 해당 리소스를 접근할 수 있게 허용된 출처

 

사실 프론트엔드가 CORS error를 해결하는 방법이 정석은 아니다 ... ❌

제일 정석적인 방법은 🧑🏻‍💻서버에서 access-control-allow-origin 을 설정🧑🏻‍💻해 주는 것
프론트엔드가 CORS error를 해결하는 방법은 🧑🏻‍💻프론트 프록시 서버 설정을 변경🧑🏻‍💻해주는 것임 

프론트 프록시 서버에서 백엔드 서버 간의 출처를 조율해주는 것이다

브라우저와 프론트 프록시 서버는 출처가 동일하므로 CORS error 가 발생함