[Front-end] CORS란?

1. CORS란?

CORS는 SOP(Same-Origin Policy; 동일 출처 정책)를 위한 에러이다.

 

💡 SOP(Same-Origin Policy; 동일 출처 정책)

- 출처가 동일한 프로토콜, 포트번호, 도메인에서만 자원을 사용 가능하도록 하는 보안정책

 

아래 사진처럼 CORS 에러는 요청 브라우저에서 다른 도메인(프로토콜, 포트번호)을 가진 서버로 요청할 때 브라우저에서 발생하는 보안정책이다. 즉, 요청한 출처와 API의 서버 출처가 다르기 때문에 브라우저에서 CORS 에러가 생기는 것이다.

 

❓ 출처가 다른 경우는 어떤 경우일까

1️⃣ 프로토콜이 다른 경우 (http ▶ https는 가능하지만 반대의 경우엔 에러 발생)

2️⃣ 도메인이 다른 경우 (www.google.com ▶ www.naver.com)

3️⃣ 포트번호가 다른 경우 (www.google.com:3000 ▶ www.google.com:3006)

---

2. CORS 해결방법

만약 서버를 백엔드 개발자가 직접 만든 경우 요청할 수 있지만,

API를 사용하는 등 외부 데이터 서버를 직접 설정할 수 없는 경우엔 아래와 같은 방법으로 해결할 수 있다.

---

1️⃣ Access-Control-Allow-Origin 설정

HTTP 응답 헤더에 Access-Control-Allow-Origin: * 혹은 Access-Control-Allow-Origin: 도메인으로 지정해주면 된다.

 

2️⃣ 프록시 서버 구축

프록시(Proxy) 서버란?

- 서버와 클라이언트 사이에서 대리로 통신을 수행하는 서버

- 클라이언트는 프록시 서버를 서버로, 서버는 프록시 서버를 클라이언트라고 인식한다.

 

🔽 프록시 서버를 구축하고 싶다면 아래 사이트를 참고하자.

CORS 프록시 서버 구축 (Feat. CORS Anywhere & Heroku)