[Weekly Paper 14] - CORS 와 CORS 에러

✨ CORS (Cross-Origin Resource Sharing)

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 서로 다른 출처에서 리소스를 공유하는 것을 말함

여기서 출처란 URL의 구조 중 프로토콜, 호스트, 포트, 패스를 합친 것을 말하는데, 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행함

보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한하기 때문에 자신의 출처와 동일한 리소스만 불러올 수 있으며, 다른 출처의 리소스를 불러오려면 그 출처에서 올바른 CORS 헤더를 포함한 응답을 반환해야함

✨ CORS 에러

CORS를 위해서는 별도의 설정이 필요한데 설정 없이 서로 다른 출처에서 리소스를 공유하려고 하면 CORS 에러가 발생함

이런 CORS 에러를 해결하는 방법은 크게 두 가지가 있음

1. 백엔드 서버 개발자에게 설정 요청

: 에러가 발생하는 출처를 허용하도록 Access-Control-Allow-Origin 설정을 요청하는 방법

2. proxy 서버를 활용

: CORS 허용을 위한 설정 요청을 할 수 없는 경우, 동일 출처 정책을 강제하지 않는 proxy 서버를 활용해 우회하는 방법이 있음
( Next.js의 경우 rewrites 활용 가능 )

참고 : MDN - 교차 출처 리소스 공유
코드잇 - CORS 에러 처리하기